株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

21-16)　1.多階層対応のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ

　

ﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ

動作；　メニュー（ul.info_2116 li）にマウスカーソルを重ねる（.hover(function(){）と
　　　　　サブメニューが下または横に展開表示（.slideDown("fast")）します。

jQueryの書き方 /*------------------------------------ */
//21-16)　多階層対応のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ
/*------------------------------------ */
//選択処理
$("ul.info_2116 li").hover(function(){
    $(">ul:not(:animated)",this).slideDown("fast");
  }
  ,function(){
    $(">ul",this).slideUp("fast");
});
ｃｓｓの書き方 /*-------------------------------------------------------
21-16)　多階層対応のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ
-------------------------------------------------------- */
.info_2116{
zoom:1;
}
.info_2116 li{
float:left;
width:179px;
height:48px;
background:url("../images/ani_btn.png");
position:relative;
list-style-type:none;
}
* html .info_2116 li{
display:inline;
zoom:1;
}
*+html .info_2116 li{
display:inline;
zoom:1;
}
.info_2116 li a{
display:block;
width:100%;
height:100%;
line-height:48px;
text-indent:30px;
font-weight:bold;
color:#CFDFB5;
text-decoration:none;
position:relative;
}
.info_2116 li a:hover{
background:url("../images/ani_btn_over.png");
}
.info_2116 ul.sub2{
display:none;
}
* html .info_2116 ul.sub2{
zoom:1;
position:relative;
}
*+html .info_2116 ul.sub2{
zoom:1;
position:relative;
}
.info_2116 ul.sub2 li{
float:none;
}
.info_2116 ul.sub2 li ul.sub2{
position:absolute;
left:179px;
top:0;
}
.info_2116:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
HTMLの書き方 <ul class="info_2116">
<li><a href="#">メニューA</a>
<ul class="sub2">
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a><!--
--><ul class="sub2">
<li><a href="#">サブメニューA2</a></li>
<li><a href="#">サブメニューA2</a></li>
<li><a href="#">サブメニューA2</a></li>
</ul><!--
--></li>
</ul>
</li>
<li><a href="#">メニューB</a>
<ul class="sub2">
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a>
<ul class="sub2">
<li><a href="#">サブメニューB2</a></li>
<li><a href="#">サブメニューB2</a></li>
<li><a href="#">サブメニューB2</a>
<ul class="sub2">
<li><a href="#">サブメニューB3</a></li>
<li><a href="#">サブメニューB3</a></li>
<li><a href="#">サブメニューB3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">サブメニューB</a></li>
</ul>
</li>
----- 省略 -----
</ul>