【応用編】ドロップダウンリストNo1

ナビゲーションによく使われている方法に
ドロップダウンリストがあります。
WEBサイトがカテゴリー毎に階層化されている場合、
トップページから直接目的のページへ導くことが出来ます。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“ul.sub”).hide(); 
  $(“ul.menu li”).hover(function(){
   $(“ul:not(:animated)”,this).slideDown(“fast”);
  },
  function(){
   $(“ul”,this).slideUp(“fast”);
  }); 
});
</script>

【HTML】
<ul class=”menu”>
<li><a href=”#”>織田家</a>
    <ul class=”sub”>
        <li><a href=”#”>織田信長</a></li>
        <li><a href=”#”>柴田勝家</a></li>
        <li><a href=”#”>佐久間信盛</a></li>
        <li><a href=”#”>丹羽長秀</a></li>
        <li><a href=”#”>森可成</a></li>
        <li><a href=”#”>滝川一益</a></li>
    </ul>
</li>
<li><a href=”#”>武田家</a>
    <ul class=”sub”>
        <li><a href=”#”>武田信玄</a></li>
        <li><a href=”#”>真田信綱</a></li>
        <li><a href=”#”>板垣信方</a></li>
        <li><a href=”#”>原虎胤</a></li>
        <li><a href=”#”>山県昌景</a></li>
        <li><a href=”#”>高坂昌信</a></li>
    </ul>
</li>
<li><a href=”#”>上杉家</a>
    <ul class=”sub”>
        <li><a href=”#”>上杉謙信</a></li>
        <li><a href=”#”>上杉景勝</a></li>
        <li><a href=”#”>直江景綱</a></li>
        <li><a href=”#”>柿崎晴家</a></li>
        <li><a href=”#”>北条高定</a></li>
        <li><a href=”#”>新発田重家</a></li>
    </ul>
</li>
<li><a href=”#”>毛利家</a>
    <ul class=”sub”>
        <li><a href=”#”>毛利元就</a></li>
        <li><a href=”#”>毛利隆元</a></li>
        <li><a href=”#”>吉川元春</a></li>
        <li><a href=”#”>小早川隆景</a></li>
        <li><a href=”#”>志道元良</a></li>
        <li><a href=”#”>福原貞俊</a></li>
        <li><a href=”#”>口羽通良</a></li>
    </ul>
</li>
</ul>

ドロップダウンリストサンプル

This entry was written by admin , posted on 木曜日 6月 23 2011at 03:06 pm , filed under 応用例 and tagged , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.