代码描述:jQuery淡入淡出效果 下拉导航菜单。jQuery淡入淡出效果下拉导航菜单源码下载
二级下拉导航菜单是最为常见的菜单之一,在众多的网站都有应用,本章节介绍分享一个具有淡入淡出效果的二级下拉菜单,代码非常的简单,之所以如此,得益于jQuery的便利性。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> *{ margin:0; padding:0 } table { border-collapse:collapse; border-spacing:0 } fieldset, img{border:0} address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal } ol, ul{list-style:none} caption, th{text-align:left} h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal } q:before, q:after{content:''} abbr, acronym{border:0} :focus{outline:0} ins{text-decoration:none} del{text-decoration:line-through} a { color:#fff; text-decoration:none; } a:hover{text-decoration: underline;} a{color: black} #nav li{ float:left; position:relative; } #nav li a { background:#d6cfbd; border:3px solid #4f4026; color:#333; display:block; margin:0 5px 0 0; padding:5px 8px; } #nav li a:hover { background:#f7f7f7; text-decoration:none; } #nav { display:block; height:35px; padding:10px 0; width:500px; z-index:100; position:absolute; } #nav > li > a{ border-top-left-radius:10px; border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; } #nav li ul { background:#e1ddd3; border:3px solid #4f4026; color:#333; display:none; margin:-3px 0 0 0; width:200px; position:absolute; } #nav li ul li{width:100%} #nav li ul li a { background:none; border:none; line-height:30px; margin:0; padding:0 0 0 5px; } #nav li ul li a:hover{background:#f7f7f7;} #nav li.current > a{background:#f7f7f7;} #nav li:hover > ul.child{display:block;} </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#nav ul.child").removeClass("child"); $("#nav li").has("ul").hover(function(){ $(this).addClass("current").children("ul").fadeIn(); },function(){ $(this).removeClass("current").children("ul").hide(); }) }) </script> </head> <body> <div id="page-wrap"> <div id="content"> <ul id="nav"> <li><a href="#">51前端</a></li> <li><a href="#">前端教程</a> <ul class="child"> <li><a href="#">div教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">js教程</a></li> <li><a href="#">jQuery教程</a></li> </ul> </li> <li><a href="#">服务</a> <ul class="child"> <li><a href="#">网站建设</a></li> <li><a href="#">网上教学</a></li> <li><a href="#">优化服务</a></li> </ul> </li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </div> </body> </html>
以上代码实现了我们的要求,二级下拉菜单具有淡入淡出效果,下面介绍一下实现过程: 一.实现原理: 本代码中使用了一些CSS3的代码,比如圆角效果,这些都不做介绍了,具体可以在本站查询相关内容,下面对二级下拉菜单的框架做一下介绍,代码如下:
<script> <li><a href="#">前端教程</a> <ul class="child"> <li><a href="#">div教程</a></li> <li><a href="#">css教程</a></li> <li><a href="#">js教程</a></li> <li><a href="#">jQuery教程</a></li> </ul> </li> </script>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能