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

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

jQuery

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

　

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

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

jQueryの書き方 /*------------------------------------ */
//21-15)　1.基本のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ s3-8-1
/*------------------------------------ */
//初期処理
$("ul.info_2115 ul.sub1").hide();
//選択処理
$("ul.info_2115 li").hover(function(){
    $("ul:not(:animated)",this).slideDown("fast");
  }
  ,function(){
    $("ul",this).slideUp("fast");
});
ｃｓｓの書き方 *--------------------------------------------
21-15)　1. 基本のﾄﾞﾛｯﾌﾟダウンﾒﾆｭｰ s3-8-1
------------------------------------------- */
.info_2115{
  zoom:1;
}
.info_2115 li{
  float:left;
  width:179px;
  height:48px;
  background:url("../images/ani_btn.png");
  position:relative;
  list-style-type:none;
}
.info_2115 li a{
  display:block;
  width:100%;
  height:100%;
  line-height:48px;
  text-indent:30px;
  font-weight:bold;
  color:#CFDFB5;
  text-decoration:none;
}
.info_2115 li a:hover{
background:url("../images/ani_btn_over.png");
}
.info_2115 li ul.sub1{
  position:absolute;
}
.info_2115:after {
  height:0;
  visibility:hidden;
  content:".";
  display:block;
  clear:both;
}
HTMLの書き方 <ul class="info_2115">
  <li><a href="#">メニューA</a>
    <ul class="sub1">
      <li><a href="#">サブメニューA</a></li>
      <li><a href="#">サブメニューA</a></li>
      <li><a href="#">サブメニューA</a></li>
    </ul>
  </li>
  <li><a href="#">メニューB</a>
      <ul class="sub1">
      <li><a href="#">サブメニューB</a></li>
      <li><a href="#">サブメニューB</a></li>
      <li><a href="#">サブメニューB</a></li>
    </ul>
  </li>
  <li><a href="#">メニューC</a>
      <ul class="sub1">
      <li><a href="#">サブメニューC</a></li>
      <li><a href="#">サブメニューC</a></li>
      <li><a href="#">サブメニューC</a></li>
    </ul>
  </li>
</ul>