jquery,CSS,画像を使って、クリックするとサブメニューを表示します。
ヘッダーで、jQuery.jsと後述のdropdown.jsを読み込んでいます。
サブメニューはCSSで非表示にしています。
マウスオーバー画像は「画像名_on」を作ってjsでhover切り替えとサブメニュー表示。
サブメニュー表示の速度は、slow,normal,fast等で変更可。
テキストで作る。ドロップダウンメニュー・プルダウンメニューもご参考に。
JSを読み込みます
<script type="text/javascript" src="js/jQuery.js"></script> <script type="text/javascript" src="js/dropdown.js"></script>
[dropdown.js]JavaScript
$(function(){
//マウスオーバー
$(".mod_dropnavi ul li img").mouseover(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
}).mouseout(function(){
$(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
}).each(function(){
$("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"));
});
//ドロップダウン表示
$(".mod_dropnavi ul.topmenu li.slidebtn>a").addClass("close");
$(".mod_dropnavi ul.submenu").addClass("close");
$(".mod_dropnavi ul.topmenu li.slidebtn>a").each(function(){
var allsubmenu = $(".mod_dropnavi ul.submenu");
var btn = $(this);
var submenu = $(this).next();
btn.click(function(){
if($(this).hasClass("open")){
$(this).removeClass("open").addClass("close");
$(submenu).slideUp("fast");
}else{
$(allsubmenu).slideUp("fast");
$(".mod_dropnavi ul.topmenu li.slidebtn>a").removeClass("open").addClass("close");
$(submenu).slideDown("fast");
$(btn).removeClass("close").addClass("open");
}
return false;
});
});
});
HTMl
<div class="mod_dropnavi ex_clearfix"> <ul class="topmenu"> <li><a href="#"><img src="menu01.gif" width="150" height="45" alt="Menu01" /></a></li> <li class="slidebtn"><a href="#"><img src="menu02.gif" width="149" height="45" alt="Menu02" /></a> <ul class="submenu"> <li><a href="#"><img src="menu02a.gif" width="150" height="44" alt="Menu02a" /></a></li> <li><a href="#"><img src="menu02b.gif" width="150" height="44" alt="Menu02b" /></a></li> <li><a href="#"><img src="menu02c.gif" width="150" height="44" alt="Menu02c" /></a></li> </ul> </li> <li><a href="#"><img src="menu03.gif" width="149" height="45" alt="Menu03" /></a></li> <li class="slidebtn"><a href="#"><img src="menu04.gif" width="149" height="45" alt="Menu04" /></a> <ul class="submenu"> <li><a href="#"><img src="menu04a.gif" width="150" height="44" alt="Menu04a" /></a></li> <li><a href="#"><img src="menu04b.gif" width="150" height="44" alt="Menu04b" /></a></li> <li><a href="#"><img src="menu04c.gif" width="150" height="44" alt="Menu04c" /></a></li> <li><a href="#"><img src="menu04d.gif" width="150" height="44" alt="Menu04d" /></a></li> </ul> </li> </ul> <!--mod_dropnavi_end --></div>
CSS
/* 画像で作るdrop downリスト
-----------------------------------------*/
/* Topmenu部分 */
.mod_dropnavi ul.topmenu{
width:920px;
height:45px;
}
.mod_dropnavi ul.topmenu li{
float:left;
position:relative;
}
.mod_dropnavi ul.topmenu li.topmenu01{width:150px;}
.mod_dropnavi ul.topmenu li.topmenu02{width:149px;}
.mod_dropnavi ul.topmenu li.topmenu03{width:149px;}
.mod_dropnavi ul.topmenu li.topmenu03{width:149px;}
.mod_dropnavi ul.topmenu li a{
display:block;
width:100%;
height:100%;
}
/* サブ階層部分 */
.mod_dropnavi ul.topmenu li ul.submenu{
width:150px;
position:absolute;
top:45px;
left:-1px;
}
.mod_dropnavi ul.topmenu li ul.submenu.close {
display:none;
}
.mod_dropnavi ul.topmenu li ul.submenu li{
height:44px;
clear:both;
}