快捷導(dǎo)航

jquery實現(xiàn)二級導(dǎo)航下拉菜單效果

更新時間：2015年12月18日 09:25:55 投稿：lijiao

這篇文章主要介紹了jquery實現(xiàn)二級導(dǎo)航下拉菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下

下拉菜單實現(xiàn)很簡單，純css也能實現(xiàn)，但是我不擅長，用jquery也就兩行代碼，于是就用jquery+css實現(xiàn)簡單二級下拉菜單導(dǎo)航，分享給大家供大家參考，具體內(nèi)容如下

運行效果圖：

具體代碼：
第一步：確定導(dǎo)航的html格式

<ul id="nav"> 
        <li><a href="#">首頁</a> 
          <ul> 
            <li><a href="#">PHP編程</a></li> 
            <li><a href="#">JAVA編程</a></li> 
            <li><a href="#">RGB對照表</a></li> 
            <li><a href="#">顏色搭配技巧</a></li> 
          </ul> 
        </li> 
        <li><a href="#">欄目一</a> 
          <ul> 
            <li><a href="#">PHP編程</a></li> 
            <li><a href="#">JAVA編程</a></li> 
            <li><a href="#">RGB對照表</a></li> 
            <li><a href="#">顏色搭配技巧</a></li> 
          </ul> 
        </li> 
<ul>

第二步：CSS實現(xiàn)導(dǎo)航效果

 #nav { 
        line-height: 24px; list-style-type: none; background:#666; 
      } 
      #nav a { 
        display: block; width: 100px; text-align:center; 
      } 
      #nav a:link { 
        color:#666; text-decoration:none; 
      } 
      #nav a:visited { 
        color:#666;text-decoration:none; 
      } 
      #nav a:hover { 
        color:#FFF;text-decoration:none;font-weight:bold; 
      } 
      #nav li { 
        float: left; width: 100px; background:#CCC; 
      } 
      #nav li a:hover{ 
        background:#999; 
      } 
      #nav li ul { 
        line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none;
      } 
      #nav li ul li{ 
        float: left; width: 180px; 
        background: #F6F6F6; 
      } 
      #nav li ul a{ 
        display: block; width: 156px;text-align:left;padding-left:24px; 
      } 
      #nav li ul a:link { 
        color:#666; text-decoration:none; 
      } 
      #nav li ul a:visited { 
        color:#666;text-decoration:none; 
      } 
      #nav li ul a:hover { 
        color:#F3F3F3;text-decoration:none;font-weight:normal; 
      }

第三步：jquery實現(xiàn)下拉隱藏效果

  $(function() {
        $("#nav li").hover(
            function() {
              $(this).find("ul").show(100);
            },
            function() {
              $(this).find("ul").hide(300);
            }
        );
      });

希望本文所述對大家學習javascript程序設(shè)計有所幫助，教大家通過jquery實現(xiàn)二級導(dǎo)航下拉菜單效果。

您可能感興趣的文章: