jQuery 下拉選單

[洪偉誠]

jQuery 下拉選單 (萬用輕巧版)

有人上課做的檔案丟了，嘿…我哪記得上課教了什麼啊，哈哈，那就把它寫完整一點給大家參考參考、討論討論嘍！ (大概有比上課多加了一點東西吧)

參考→展示

這不是 Plugin ，但是用類似 Plugin 手法寫的。

1. html 片段 (紅字標出層級的示範)

   <section>
   <ul><li><dl>
    <dt>part1</dt>
    <dd><ul>
     <li><a href="?">1-1</a></li>
     <li><a href="?">1-2</a></li>
    </ul></dd>
   </dl></li><li><dl>
    <dt>part2</dt> ←
    <dd><ul>
     <li><a href="?">2-1</a></li>
     <li><dl>
      <dt>2-2</dt>
      <dd><ul>
       <li><a href="?">2-2-1</a></li>
       <li><dl>
        <dt>2-2-2</dt> ←
        <dd><ul>
         <li><a href="?">2-2-2-1</a></li> ←
         <li><a href="?">2-2-2-2</a></li> ←
        </ul></dd>
       </dl></li>
       <li><dl>
        <dt>2-2-3</dt>
        <dd><ul>
         <li><a href="?">2-2-3-1</a></li>
         <li><a href="?">2-2-3-2</a></li>
         <li><a href="?">2-2-3-3</a></li>
        </ul></dd>
       </dl></li>
      </ul></dd>
     </dl></li>
     <li><dl>
      <dt>2-3</dt>
      <dd><ul>
       <li><a href="?">2-3-1</a></li>
       <li><a href="?">2-3-2</a></li>
      </ul></dd>
     </dl></li>
    </ul></dd>
   </dl></li><li><dl>
    <dt>part3</dt>
    <dd><ul>
     <li><dl>
      <dt>3-1</dt>
      <dd><ul>
       <li><a href="?">3-1-1</a></li>
       <li><a href="?">3-1-2</a></li>
      </ul></dd>
     </dl></li>
     <li><a href="?">3-2</a></li>
    </ul></dd>
   </dl></li>
   </ul>
   </section>

2. css 片段

   /** jQuery dropdown menu.
    * ©webchain(不惑仔 http://boohover.pixnet.net/), all rights reserved. Free for commercial and personal use.
    */
   *.dropmenu{min-height:6em;}
   *.dropmenu ul,*.dropmenu dl,*.dropmenu dd
   {padding:0;margin:0;}
   *.dropmenu>ul>li{
    display:inline-block;
    vertical-align:top;
    width:6em;
    background:#eee;
   }
   *.dropmenu li{
    position:relative;
    list-style:none;
    cursor:default;/*還有下層的鼠標顯示成箭頭*/
   }
   *.dropmenu dd{
    position:absolute;
    left:100%;top:1%;
    min-width:99%;
   }
   *.dropmenu>ul>li>dl>dd{
    left:0;top:100%;
    right:0;
   }
   *.dropmenu dd>ul{
    border:solid 1px rgba(0,0,0,0.2);
    border-bottom:none;
    background:hsla(60,100%,80%,0.85);
   }
   *.dropmenu dt,*.dropmenu a{
    border-bottom:solid 1px rgba(0,0,0,0.2);
    padding:0.25em 0.5em;
   }
   *.dropmenu>ul>li>dl>dt{
    border:solid 1px rgba(0,0,0,0.2);
   }
   *.dropmenu a{
    display:block;
    text-decoration:none;
   }
   /*jQuery 動態開與關的設計*/
   *.dropmenu *.booActive{
    background:hsla(240,100%,90%,0.3);
   }

3. jQuery javascript 片段

   /** jQuery dropdown menu.
    * Requires jQuery >= 1.7 from http://jquery.com
    * ©webchain(不惑仔 http://boohover.pixnet.net/). Free for commercial and personal use.
    */
   (function($){
   var opt={};
   opt.conta=$('section:first-of-type').addClass('dropmenu');
   opt.subs=$('dd',opt.conta).hide();
   opt.dur=250;/*動畫持續時間； null 無動畫*/
   opt.activeClass='booActive';/*作用中的項目的 class ，配合 css 設計*/
   opt.dropdown=function(e){
    var sub=$(this).toggleClass(opt.activeClass).next().toggle(opt.dur);
    var sib=$(this).parent().parent().siblings();
    $('dt',sib).add($('dt',sub)).removeClass(opt.activeClass);
    $('dd',sib).add($('dd',sub)).hide();
   };
   opt.cap=$('dt',opt.conta).on('click',opt.dropdown);
   })(jQuery);

實作參考→展示