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

ドロップダウンリストNo1では一階層しかありませんでしたが、
多階層にも対応できるようにしましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“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>
            <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>
            </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>
            </ul>
        </li>
    </ul>
</li>
<li><a href=”#”>物理学</a>
    <ul class=”sub”>
        <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>
            </ul>
        </li>
    </ul>
</li>
</ul>

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

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

Comments are closed.