jQuery实现的多级下拉菜单效果代码

时间：2021-05-26

本文实例讲述了jQuery实现的多级下拉菜单效果代码。分享给大家供大家参考。具体如下：

这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体上来看，和Windows系统的“经典”主题时的菜单风格特别相似，配合图片，整体效果还是相当有专业水准的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-nlevel-nav-menu-style-codes/

具体代码如下：

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery多级下拉菜单</title></head><body><script src="jquery-1.6.2.min.js"></script><script>$(document).ready(function(){$('#menu li').hover(function(){ $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(400); // effect 1 },function(){ $(this).find('ul:first').css({visibility: "hidden"}); });});</script><style>body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}.examples{background:#FFF;width:800px;font-size:80%;border:1px #000 solid;margin:3.5em auto 2em;padding:1em 2em 2em}#menu {width:750px; height:531px; background:url(images/snowboard.jpg); text-align:center; margin:0 auto;}#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; background:#ccccd0; border:1px solid #333; border-color:#eee #555 #222 #fff;}#menu ul {display:inline-block;}#menu li {margin:0; padding:0; list-style:none;}#menu li {display:inline-block; display:inline;}#menu ul ul {position:absolute; left:-9999px;}#menu ul.level1 {margin:0 auto;}#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}#menu b {position:absolute;}#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#000; line-height:25px; text-decoration:none;padding:0 20px;}#menu ul.level1 li.level1-li a.level1-a {float:left;}#menu ul li:hover > ul {visibility:visible; left:0; top:21px;}#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px; margin-left:-4px;}#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px; margin-right:-4px;}#menu a:hover ul {left:0; top:23px;}#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}#menu li.left ul a {text-align:right;}#menu a:hover a:hover ul,#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}#menu li.left a:hover a:hover ul,#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}#menu a:hover ul ul,#menu a:hover a:hover ul ul {left:-9999px;}#menu li.left a:hover ul ul,#menu li.left a:hover a:hover ul ul {left:-9999px;}#menu li a.drop {background:transparent url(images/white-down.gif) no-repeat right center;}#menu li a.fly {background:transparent url(images/white-right.gif) no-repeat right center;}#menu li.left ul a.fly {background:transparent url(images/white-left.gif) no-repeat left center;}#menu li a:hover,#menu li a.fly:hover {color:#c60; background-color:#c0c0c8;}#menu li:hover > a,#menu ul li:hover > a.fly {color:#c60; background-color:#c0c0c8;}#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-6px;}#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-left:-4px;}#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-30px; margin-right:-4px;}</style><div class="examples"> <div id="menu"> <ul class="level1"> <li class="level1-li"><a class="level1-a" href="#url">Home</a></li> <li class="level1-li"><a class="level1-a drop" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Email</a></li> <li><a href="#url">Telephone</a></li> <li><a href="#url">Online Form</a></li> <li><a href="#url">Snail Mail Address</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li"><a class="level1-a drop" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Ski Hire Facilities</a></li> <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Beginners Slopes</a></li> <li><a href="#url">Intermediate Slopes</a></li> <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level4"> <li><a href="#url">Local</a></li> <li><a href="#url">Nearby</a></li> <li><a href="#url">With instructor</a></li> <li><a href="#url">Snow boarding</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Expert</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Night Life</a></li> <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">From Airport</a></li> <li><a href="#url">In Resort</a></li> <li><a href="#url">Multiple Resorts</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li"><a class="level1-a drop" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Where to go</a></li> <li><a href="#url">What to do</a></li> <li><a href="#url">Places of interest</a></li> <li><a href="#url">National parks & Museums</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li left"><a class="level1-a drop" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level2"> <li><a href="#url">Money Exchange</a></li> <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Lift Passes</a></li> <li><a href="#url">Insurance</a></li> <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level4"> <li><a href="#url">Boots</a></li> <li><a href="#url">Skis</a></li> <li><a href="#url">Ski Wear</a></li> <li><a href="#url">Goggles</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Ski Schools</a></li> <li><a href="#url">Snow Report</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="level3"> <li><a href="#url">Austrian</a></li> <li><a href="#url">German</a></li> <li><a href="#url">French</a></li> <li><a href="#url">English</a><b></b></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#url">Short Breaks</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li> </ul> </div> <div style="clear:both"></div></div><hr style="clear:both;" /></body></html>

希望本文所述对大家的jquery程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章