信鸽网

jquery实现二级导航下拉菜单效果

  作者：bea

下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery+css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下 运行效果图： 具体代码： 第一步：确定导航的html格式 <ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href

下拉菜单实现很简单，纯css也能实现，但是我不擅长，用jquery也就两行代码，于是就用jquery+css实现简单二级下拉菜单导航，分享给大家供大家参考，具体内容如下


运行效果图：



具体代码：
第一步：确定导航的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实现导航效果        




 #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实现下拉隐藏效果     




  $(function() {

        $("#nav li").hover(

            function() {

              $(this).find("ul").show(100);

            },

            function() {

              $(this).find("ul").hide(300);

            }

        );

      });


希望本文所述对大家学习javascript程序设计有所帮助，教大家通过jquery实现二级导航下拉菜单效果。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: