jQuery 纵向二级伸缩树形菜单、黑色风格

　　jQuery 实用简洁的黑色竖向二级下拉导航菜单，点击任何一级菜单则展开二级菜单，代码控制菜单不能同时展开所有子级。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!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> <title>jQuery 实用的竖向二级下拉导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body { font-family: Helvetica, Arial, sans-serif; font-size: 0.9em; } p { line-height: 1.5em; } ul#menu, ul#menu ul { list-style-type:none; margin: 0; padding: 0; width: 15em; } ul#menu a { display: block; text-decoration: none; } ul#menu li { margin-top: 1px; } ul#menu li a { background: #333; color: #fff; padding: 0.5em; } ul#menu li a:hover { background: #000; } ul#menu li ul li a { background: #ccc; color: #000; padding-left: 20px; } ul#menu li ul li a:hover { background: #aaa; border-left: 5px #000 solid; padding-left: 15px; } .code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; } .code code { display: block; padding: 3px; margin-bottom: 0; } .code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; } .indent1 { padding-left: 1em; } /* 烈火網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ */ .indent2 { padding-left: 2em; } </style>  <script src="/uploads/common/js/jquery-1.3.2.js" type="text/javascript"></script> <script type="text/javascript"> function initMenu() { $('#menu ul').hide(); $('#menu ul:first').show(); $('#menu li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#menu ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenu();}); </script> </head> <body> 预览提示错误，请刷新页面。 <ul id="menu"> <li> <a href="#">Weblog Tools</a> <ul> <li><a href="#">PivotX</a></li> <li><a href="#">WordPress</a></li> </ul> </li> <li> <a href="#">Programming Languages</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> <li><a href="#">Python</a></li> </ul> </li> <a href="#">Search Engines</a> <ul> <li><a href="#">Yahoo!</a></li> <li><a href="#">Google</a></li> <li><a href="http://search.liehuo.org">Liehuo</a></li> </ul> </li> </ul> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

jQuery 纵向二级伸缩树形菜单、黑色风格

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

jQuery 纵向二级伸缩树形菜单、黑色风格

由 dawei

相关文章

导航界面推荐广告？蔚来回应 不会用车机屏幕展开广告业务

第四届进博会进入布展阶段 首批展品已进入场

他们是数字经济领域的弄潮儿，2021年度数字新浙商榜单发布

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

导航界面推荐广告？蔚来回应不会用车机屏幕展开广告业务

第四届进博会进入布展阶段首批展品已进入场