知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    jquery導航下拉菜單兩級平滑導航菜單

    作者:佳明媽 來源:jquery特效 2012-05-30 人氣:
    jquery代碼簡潔明了,html結構簡潔明了,這里只是隨便寫一下,jquery導航下拉菜單兩級平滑下拉。調用代碼: $.navlevel2("li.mainlevel",300); 只的是主菜單的標簽

    jquery代碼簡潔明了,html結構簡潔明了,css請自行修改定制,這里只是隨便寫一下,jquery導航下拉菜單兩級平滑下拉。高手可以不要看文字說明^_^

    調用代碼: $.navlevel2("li.mainlevel",300); 只的是 主菜單的 標簽,也不一定要是li,比如你搞成div結構你就寫div.mainlevel也是一個效果地。
    300 是指鼠標停留 300 毫秒才觸發下拉菜單,有沒有發現,有些菜單鼠標快速滑過的時候,所有的菜單都開始滑出,體驗相當不好。懶人建站的jquery代碼中凡是類似  $.navlevel2("li.mainlevel",300); 這種調用的都是可以重復使用的哦。

    jquery導航下拉菜單兩級平滑下拉菜單,希望喜歡,寫文章并不是件愉快的事情!!!

    jquery代碼:
    <script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        jQuery.navlevel2 = function(level1,dytime) {
            
          $(level1).mouseenter(function(){
              varthis = $(this);
              delytime=setTimeout(function(){
                varthis.find('ul').slideDown();
            },dytime);
            
          });
          $(level1).mouseleave(function(){
             clearTimeout(delytime);
             $(this).find('ul').slideUp();
          });
          
        };
      $.navlevel2("li.mainlevel",300);
    });
    </script>

    html代碼:
    <ul id="nav">
        <li class="mainlevel"><a href="http://www.fsussj.tw/js/">jquery特效</a>
            <ul>
                <li><a href="http://www.fsussj.tw/js/texiao/">網頁特效</a></li>
                <li><a href="http://www.fsussj.tw/js/nav/">導航菜單</a></li>
                <li><a href="http://www.fsussj.tw/js/slide/">焦點幻燈片</a></li>
                <li><a href="http://www.fsussj.tw/qqkefu/">qq在線客服代碼</a></li>
                <li><a href="http://www.fsussj.tw/xuanxiangka/">選項卡代碼</a></li>
            </ul>
        </li>
    </ul>
     

    ↓ 查看全文

    jquery導航下拉菜單兩級平滑導航菜單由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    jquery導航下拉菜單兩級平滑導航菜單-最新評論

    • 懶人建站網友 2016-03-30 08:34:41
      無法下載
    • 11 2016-03-30 08:03:41
      無法下載
    • 清水裕子 2015-10-27 11:11:34
      做做看哦,謝謝提供
    • 清水裕子 2015-10-27 11:11:27
      頂起來!!不好碰到的好文章
    • 11 2015-10-27 11:10:34
      做做看哦,謝謝提供
    • 11 2015-10-27 11:10:27
      頂起來!!不好碰到的好文章
    • 好想談戀愛 2015-10-09 06:34:22
      [浮云]
    福利彩票排列7走势图