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/13

サイドナビ、サイドメニューを画像で作る。

htmlは、ul、li 。マウスオーバー表示は一枚の画像をスライドして画像を表示しています。

デモページはナビゲーション上部にタイトルを入れていますが、不要ならとってください。マウスオーバー時の画像と通常時の画像を縦にならべて一枚画像を作っておきます。

HTMl

<div class="mod_Sidemenu002">
<h3><img src="Sidemenu_002title.jpg" width="200" height="40" alt="タイトル" /></h3>
<ul>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
<li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li>
</ul>
<!-- mod_Sidemenu002_end --></div>

CSS

.mod_Sidemenu002{
	width:200px;
	padding:10px;
	background-color:#DDD;
}
.mod_Sidemenu002 h3{
}
.mod_Sidemenu002 ul{
	border-top:solid 1px #CCC;
}
.mod_Sidemenu002 ul li{
	height:40px;
	overflow:hidden;
	vertical-align:bottom; /* IE6で画像下の隙間削除 */
	border-bottom:solid 1px #CCC;
}
.mod_Sidemenu002 ul li a{
	display:block;
}
.mod_Sidemenu002 ul li a:link    {text-decoration:none;}
.mod_Sidemenu002 ul li a:visited {text-decoration:none;}
.mod_Sidemenu002 ul li a:hover   {margin-top:-40px;}
.mod_Sidemenu002 ul li a:active  {margin-top:-40px;}