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

2019-11-20 10:59:39

字体：大中小

来源：转载

供稿：网友

下拉菜单实现很简单，纯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实现二级导航下拉菜单效果。

上一篇：jQuery Validate插件实现表单强大的验证功能

下一篇：学习jQuey中的return false