Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
テキストでつくる幅が可変のナビゲーション - CodingMania

2011/3/6

テキストでつくる幅が可変のナビゲーション

リストの項目(テキスト)にあわせて幅は自動に調整されます。

マウスオーバー表示、classをつけることによって現在地表示を背景画像を変更して表示しています。
【2012.09.04改訂】

HTMl

<div class="mod_Gnavi001">
<ul>
<li><a href="#">Menu01</a></li>
<li><a href="#">Menu02</a></li>
<li><a href="#">MenuMenu01</a></li>
<li><a href="#">MenuMenu02</a></li>
<li class="current"><a href="#">MenuMenu03</a></li>
<li><a href="#">MenuMenu04</a></li>
<li class="last"><a href="#">Menu03</a></li>
</ul>
<!--mod_Gnavi001_end --></div>

CSS

/* GlobalNavi_001:テキストでつくる可変グローバルナビゲーション
-----------------------------------------*/
.mod_Gnavi001{
	height:45px;
	background:transparent url('img/menu_off.jpg') repeat-x left top;
}
.mod_Gnavi001 ul{
	width:960px;
	position:relative;
	margin:0 auto;
	line-height:45px;
}
.mod_Gnavi001 ul li{
	float:left;
	font-weight:bold;
	border-left:1px solid #BBB;
}
.mod_Gnavi001 li.last{
	border-right:1px solid #BBB;
}
.mod_Gnavi001 li.current{
	background:transparent url('img/menu_current.jpg') repeat-x left top;
}
.mod_Gnavi001 li.current a:hover{
	background:transparent url('img/menu_current.jpg') repeat-x left top;
}
.mod_Gnavi001 ul li a{
	display: block;
  color:#333;
	padding:0 20px 0 20px;
	text-decoration:none;
}
.mod_Gnavi001 ul li a:hover{
	background:transparent url('img/menu_on.jpg') repeat-x left top;
}