CodingMania

CodingMania

2011/4/3

画像で作る。ドロップダウンメニュー・プルダウンメニュー

jquery,CSS,画像を使って、クリックするとサブメニューを表示します。

ヘッダーで、jQuery.jsと後述のdropdown.jsを読み込んでいます。
サブメニューはCSSで非表示にしています。
マウスオーバー画像は「画像名_on」を作ってjsでhover切り替えとサブメニュー表示。
サブメニュー表示の速度は、slow,normal,fast等で変更可。
テキストで作る。ドロップダウンメニュー・プルダウンメニューもご参考に。

デモページへopen_in_new

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;
}

© CodingMania.net