分享一个利用jquery实现的下拉菜单效果,代码简洁易修改。这里使用jquery分别实现了两种下拉菜单的效果,其实原理是一样的,经测试是兼容IE,火狐等各大主流浏览器的。下面贴一下这个下拉菜单的效果图。
jquery下拉菜单效果一:
jquery下拉菜单效果二:
下面将效果一的代码贴一下,如果需要效果二的代码的话,可以自己修改或者在下面下载源码即可。
<html xmlns="http://www.maopiaopiao.com/jquery-effects/114.html"> <head> <title>JQUERY下拉菜单示例</title> <meta content="text/html; charset=utf-8" http-equiv=Content-Type> <style type="text/css"> body,html{font: normal 14px "宋体";} #menu_yhm{width:100%; height:30px} #menu_yhm ul{padding:0 0; list-style-type:none; margin:0 0;} #menu_yhm li{position:relative; width:160px; background:#006666; float:left; height:30px; border-right:#fff 1px solid;} #menu_yhm li a{text-align:center; line-height:30px; width:160px; display:block; height:30px; color:#fff; text-decoration:none;} #menu_yhm li a:hover{background-color:#990000; color:#ff0;} #menu_yhm ul ul{z-index:99; position:absolute; width:160px; display:none; background:#900; top:30px; left:0px;} #menu_yhm ul ul li{position:relative; display:block; background-color:#900; border-top:#fff 1px solid;} #menu_yhm ul ul ul{z-index:199; position:absolute; width:160px; background:#900; top:-1px; left:161px;} #menu_yhm li.li01{background:#900;} #menu_yhm li.li01 a{color:#ff0;} #menu_yhm li.li01 li a{color:#fff;} #menu_yhm li.li01 li a:hover{background-color:#000; color:#ff0;} #menu_yhm li li.li01 a{background:#000; color:#ff0;} #menu_yhm li li.li01 ul a{color:#fff;} #menu_yhm li li.li01 ul a:hover{background:#333; color:#ff0;} </style> <script language="javascript" type="text/javascript" src="http://www.maopiaopiao.com/js/jquery.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#menu_yhm ul li").hover( function(){ $(this).children("ul").show(); $(this).addClass("li01"); }, function(){ $(this).children("ul").hide(); $(this).removeClass("li01"); }); }); </script> <body> <div id="menu_yhm"> <ul> <li><a href="#">设计前沿</a> <ul> <li><a href="#">网页设计</a></li> <li><a href="#">平面设计</a></li> <li><a href="#">ui设计</a></li> </ul> </li> <li><a href="#">技术文档</a> <ul> <li><a href="#">jquery</a></li> <li><a href="#">php+mysql</a></li> <li><a href="#">web前端</a> <ul> <li><a href="#">div+css</a></li> <li><a href="#">psd源文件</a></li> <li><a href="#">html源码</a></li> </ul> </li> <li><a href="#">常用软件和工具</a></li> </ul> </li> <li><a href="#">电子商务</a> <ul> <li><a href="#">b2c网站</a></li> <li><a href="#">国外优秀商务网站</a></li> <li><a href="#">服装外贸</a></li> </ul> </li> </ul> </div> <p style="margin-top:140px;">本示例由 <a target="_blank" href="http://www.maopiaopiao.com/">php程序员教程网</a> 提供!</p> </body> </html>
jquery下拉菜单源码下载