利用Jquery实现二级下拉菜单

来源：互联网发布：全职高手周边衬衫淘宝编辑：程序博客网时间：2024/04/30 15:59

最近在学习前端的内容：看到别人做的二级菜单挺好看的。下载别人的Demo看起来比较麻烦，所以就尝试了自己做一个简单二级下拉菜单：

效果图如下：

下拉菜单实现后的效果图：

没有做什么美化，只是从功能上实现下拉菜单

HTML代码：

<!DOCTYPE html><html><head><title></title><meta http-equiv="content-type" type="text/html" charset="utf-8"><link rel="stylesheet" type="text/css" href="css/layout.css"><script type="text/javascript" src="js/jquery.js"></script></head><body><div id="header">   <div class="headerwrapper">         <!--logo-->        <div class="logo">        <img src="images/logo.jpg" alt="hello "style="width:60px;height:60px;padding-left:40px;">        </div>        <!--end logo-->        <!-- nav start -->        <div class="nav">          <!--start nav-->          <div class="navbar">        <ul>                <li><a href="">首 页</a>                 <div class="listview">                 <ul>                 <li><a href="#">关于</a> </li>                 <li><a href="#">内容</a> </li>                 <li><a href="#">注册</a></li>                 <li><a href="#">帐号</a> </li>                 </ul>                 </div>                </li>                <li><a href="">注册</a>                <div class="listview">                 <ul>                 <li><a href="#">first</a> </li>                 <li><a href="#">second</a> </li>                 <li><a href="#">third</a></li>                 <li><a href="#">four</a> </li>                 </ul>                 </div>                </li>                <li><a href="">登录</a>                <div class="listview">                 <ul>                 <li><a href="#">first</a> </li>                 <li><a href="#">second</a> </li>                 <li><a href="#">third</a></li>                 <li><a href="#">four</a> </li>                 </ul>                 </div>                </li>                <li><a href="">编码</a><div class="listview">                 <ul>                 <li><a href="#">first</a> </li>                 <li><a href="#">second</a> </li>                 <li><a href="#">third</a></li>                 <li><a href="#">four</a> </li>                 </ul>                 </div>                </li>                <li><a href="">关于</a>                <div class="listview">                 <ul>                 <li><a href="#">first</a> </li>                 <li><a href="#">second</a> </li>                 <li><a href="#">third</a></li>                 <li><a href="#">four</a> </li>                 </ul>                 </div>                </li>                <li><a href="">文档</a>                <div class="listview">                 <ul>                 <li><a href="#">first</a> </li>                 <li><a href="#">second</a> </li>                 <li><a href="#">third</a></li>                 <li><a href="#">four</a> </li>                 </ul>                 </div>                </li>        </ul>           </div>           <!--end  navbar-->        </div>        <!--end nav-->   </div>   <!--end headerwrapper--></div><!--end header--><!--container--><div id="container"></div><!--footer--><div id="footer"></div><script type="text/javascript"> $(document).ready(function(){   $(".navbar ul li").mouseenter(function(){    $(".listview",this).show(function(){    $(".navbar ul li").mouseleave(function(){      $(".listview",this).hide();});});   ;}); });</script></body></html>

样式表CSS:

<pre name="code" class="css">body{font-size:14px;background-color:white;line-height:20px;}/* header css*/#header{margin:0 auto;height:70px;width:90%;background-color:#fdf6e3;}   .headerwrapper{width:960px;margin:0 auto;background-color:#fdf6e3;}       .logo{width:20%;float:left;height:60px;}       .nav{width:70%;float:left;height:60px;}         /*.navbar{margin:0 auto;height:60px;position:fixed;}*/           ul{display:block;font-size:20px;cursor: pointer;}           li{list-style:none;float:left;width:80px;text-indent:10px;}           li a{text-decoration: none;}           a:hover{margin-top:10px;color:blue;background-color: yellow;}         .listview{margin-left:-47px;display:none;background-color:pink;}           .listview ul{cursor:pointer;width :100px;}          .listview li {list-style:none;padding-top:3px;background-color: gray;}        .listview li a:hover{margin-top:10px;background-color:yellow;font-size:24px;}/* container css*/#container{margin:20px auto;width:80%;h}/* footer css*/#footer{ margin:20px auto;width:85%;}

其中主要的功能性JQUery代码为：

这是我在学习过程中自己写的一个demo,不足之处希望各位指教，

0 0