search

Home >Web Front-end >JS Tutorial >Fade-in and fade-out drop-down menu effect implemented by jquery_jquery

Fade-in and fade-out drop-down menu effect implemented by jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:42:581319browse

The example in this article describes the fade-in and fade-out drop-down menu effect implemented by jquery. Share it with everyone for your reference. The details are as follows:

This is a jQuery drop-down menu with a fade-in and fade-out effect. It can be used as a template for a drop-down navigation menu. Move the mouse to the first-level main menu to take a look, and hover over the menu items including the second-level submenu. When stopped, the secondary menu gradient is displayed, and the compatibility is also very good. I hope everyone likes it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/

The specific code is as follows: 

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉菜单效果</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{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='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#63;ver=1.4.2'></script>-->
<script type='text/javascript' src='jquery-1.6.2.min.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">
<h2>jQuery sub-navigation with CSS fall-back</h2>
<ul id="nav">
<li><a href="#">网站主页</a></li>
<li><a href="#">开源源码</a>
<ul class="child">
 <li><a href="#">PHP源码</a></li>
 <li><a href="#">ASP源码</a></li>
 <li><a href="#">JSP源码</a></li>
 <li><a href="#">Ajax源码</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul class="child">
 <li><a href="#">广告业务</a></li>
 <li><a href="#">Installations</a></li>
 <li><a href="#">Setups</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

I hope this article will be helpful to everyone’s jquery programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery image scrolling enlargement code sharing (1)_jqueryNext article：jquery image scrolling enlargement code sharing (1)_jquery

Related articles

See more