クリック（フォーカスがあたる）とサブメニューを表示します。
hoverでは表示しません。
JSを読み込みます
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript" src="js/dropdown.js"></script> |
[dropdown.js]JavaScript
$(function(){//global nav var btn = $(".mod_dropnavi ul li.parent"); var submenu = $(".mod_dropnavi_child"); var submenulink = $(".mod_dropnavi_child ul li a"); //click $(btn).bind("click", "focus", function(event){ var shownav = $(this).find(".mod_dropnavi_child"); if($(shownav).css("display")=="none"){ $(shownav).slideDown("fast"); }else{ $(shownav).slideUp("fast"); } }); //hover $(btn).hover(function () { }, function () { $(submenu).slideUp("fast"); });}); |
HTMl
<div class="mod_dropnavi ex_clearfix"><ul><li><a href="#">Menu01</a></li><li class="parent"><a href="javascript:void(0)">Menu02</a> <div class="mod_dropnavi_child"> <ul> <li><a href="#">Menu02_Aのタイトルが長い場合</a></li> <li><a href="#">Menu02_B</a></li> <li><a href="#">Menu02_C</a></li> </ul> <!-- /mod_dropnavi_child --></div></li><li><a href="#">Menu03</a></li><li class="parent"><a href="javascript:void(0)">Menu04</a> <div class="mod_dropnavi_child"> <ul> <li><a href="#">Menu04_A</a></li> <li><a href="#">Menu04_B</a></li> <li><a href="#">Menu04_C</a></li> <li><a href="#">Menu04_D</a></li> </ul> <!-- /mod_dropnavi_child --></div></li></ul><!--mod_dropnavi_end --></div> |
CSS
/* drop down-----------------------------------------*//* link */.mod_dropnavi ul li a{ transition-property: border; transition-duration: 0.5s; transition-timing-function: ease; transition-delay: 0s;}.mod_dropnavi ul li a:link {text-decoration:none;}.mod_dropnavi ul li a:visited {text-decoration:none;}.mod_dropnavi ul li a:hover {text-decoration:none;}.mod_dropnavi ul li a:active {text-decoration:none;}/* mod_dropnavi */.mod_dropnavi>ul{ width:920px; height:45px; border-bottom:solid 3px #003700; background-color:#336600;}.mod_dropnavi>ul>li{ width:150px; float:left; position:relative; text-align:center; line-height:45px; border-right:solid 1px #003700;}.mod_dropnavi>ul>li>a{ display:block; color:#FFFFFF; font-weight:bold; border-bottom:solid 3px #003700;}.mod_dropnavi>ul>li>a:hover {border-bottom:solid 3px #336600;}.mod_dropnavi>ul>li>a:active {border-bottom:solid 3px #336600;}/* mod_dropnavi_child */.mod_dropnavi .mod_dropnavi_child{ display:none; position:absolute; top:48px; left:0px; z-index:99; padding:12px 0 0 0!important; background:transparent url('img/icon_arrow_01.png') no-repeat 10px 0px!important;}.mod_dropnavi .mod_dropnavi_child ul{ padding:4px 27px 16px 27px!important; background-color:#003700;}.mod_dropnavi .mod_dropnavi_child ul li{ font-size:90%; line-height:1.3; text-align:left; margin:12px 0 0 0!important; white-space:nowrap;}.mod_dropnavi .mod_dropnavi_child ul li a{ padding:0 0 0 12px!important; display:inline-block; background:transparent url('img/icon_arrow_02.png') no-repeat left 5px!important;}.mod_dropnavi .mod_dropnavi_child ul li a:link {color:#FFF; text-decoration:none;}.mod_dropnavi .mod_dropnavi_child ul li a:visited {color:#FFF; text-decoration:none;}.mod_dropnavi .mod_dropnavi_child ul li a:hover {color:#FFF; text-decoration:underline;}.mod_dropnavi .mod_dropnavi_child ul li a:active {color:#FFF; text-decoration:underline;} |