UEDspace

专注于web前端开发、关注用户体验、网页重构.

jquery无限级下拉菜单

六月 3rd, 2010 由 luo Leave a reply »

前段时间写了一个下拉菜单只有两级，今天闲着没事再次研究了下，发现无限级的更简单，呵呵，以下是代码，可以运行浏览效果（需再次刷新新开窗口）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无限极下拉菜单</title> <script type="text/javascript" src="http://www.uedspace.com/zuopin/js/jquery.js"></script> <style type="text/css"> body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial,\5b8b\4f53,sans-serif;} h1,h2,h3,h4,h5,h6{font-size:100%;} address,cite,dfn,em,var{font-style:normal;} code,kbd,pre,samp{font-family:courier new,courier,monospace;} small{font-size:12px;} ul,ol{list-style:none;} a{text-decoration:none;} a:hover{text-decoration:underline;} sup{vertical-align:text-top;} sub{vertical-align:text-bottom;} legend{color:#000;} fieldset,img{border:0;} button,input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} #menu{ width:500px; border:1px solid #333; margin-left:auto; margin-right:auto; zoom:1; height:22px; padding:10px;} #menu li{ width:100px; text-align:center; line-height:22px; float:left; background:#666; color:#FFF; cursor:pointer;} #menu li a{ color:#FFF; display:block;} #menu li a:hover{ color:#FFF; background-color:#999;} .item li{ position:relative;} .item li ul{ position:absolute; top:0; left:100px;} </style> <script type="text/javascript"> $(function(){ $('#menu li ul').find('li').hide(); $('#menu li').hover( function(){ $(this).children().children('li').fadeIn(); },function(){ $(this).children().children('li').fadeOut(); } ); }); </script> </head> <body> <ul id="menu"> <li> <a>菜单一</a> <ul class="item"> <li> <a href="#">菜单一1</a> <ul> <li>菜单一11</li> <li>菜单一11</li> <li>菜单一11</li> <li>菜单一11</li> </ul> </li> <li> <a href="#">菜单一2</a> <ul> <li>菜单一22</li> <li>菜单一22</li> <li>菜单一22</li> <li>菜单一22</li> </ul> </li> <li> <a href="#">菜单一3</a> <ul> <li>菜单一33</li> <li>菜单一33</li> <li>菜单一33</li> <li>菜单一33</li> </ul> </li> </ul> </li> <li> <a>菜单二</a> <ul class="item"> <li> <a href="#">菜单二1</a> <ul> <li>菜单二11</li> <li>菜单二11</li> <li>菜单二11</li> <li>菜单二11</li> </ul> </li> <li> <a href="#">菜单二2</a> <ul> <li>菜单二22</li> <li>菜单二22</li> <li>菜单二22</li> <li>菜单二22</li> </ul> </li> <li> <a href="#">菜单二3</a> <ul> <li>菜单二33</li> <li>菜单二33</li> <li>菜单二33</li> <li>菜单二33</li> </ul> </li> </ul> </li> <li> <a>菜单三</a> <ul class="item"> <li> <a href="#">菜单三1</a> <ul> <li>菜单三11</li> <li>菜单三11</li> <li>菜单三11</li> <li>菜单三11</li> </ul> </li> <li> <a href="#">菜单三2</a> <ul> <li>菜单三22</li> <li>菜单三22</li> <li>菜单三22</li> <li>菜单三22</li> </ul> </li> <li> <a href="#">菜单三3</a> <ul> <li>菜单三33</li> <li>菜单三33</li> <li>菜单三33</li> <li>菜单三33</li> </ul> </li> </ul> </li> </ul> </body> </html>

提示：你可以先修改部分代码再运行。

Posted in jquery

Tags: 下拉菜单

You can follow any responses to this entry through the RSS 2.0 Feed. You can leave a response , or trackback from your own site.

留下评论

Back to Top

Valid XHTML 1.0 Transitional | Valid CSS 3 京ICP证09084678号