Home > Article > Web Front-end > jQuery method to implement fade-in and fade-out secondary drop-down navigation menu_jquery

jQuery method to implement fade-in and fade-out secondary drop-down navigation menu_jquery

WBOYOriginal: 2016-05-16 15:41:421095browse

The example in this article describes how jQuery implements the fade-in and fade-out secondary drop-down navigation menu. Share it with everyone for your reference. The details are as follows:

This is a navigation menu based on jQuery. It fades in and out of the secondary menu navigation. It is a very common effect. The jquery-1.6.2 version of JS is used here. Move the mouse to include the secondary submenu. On the main menu, the secondary submenu will immediately gradually appear. When the mouse moves over the secondary submenu, the background of the submenu items will change.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<!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>渐隐渐现的二级竖向下拉导航菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;}
ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;color:#000;}
#wrap{position:relative;top:0px;width:876px;height:34px;line-height:34px;margin:0 auto;}
ul#menu li{float:left;display:block;width:92px;height:37px;line-height:37px;text-align:center;margin-right:2px;}
ul#menu li a:link{display:block;background:#EDEBEC;font-size:14px;color:#333;width:92px;height:37px;line-height:37px;}
ul#menu li a:hover,.red{background:#CE070E!important;color:#FFF!important;}
/*子菜单*/
ul#menu li ul{position:absolute;top:37px;width:90px;display:none;border:1px #CE070E solid;border-top:none;background:#FFF;}
ul#menu li ul li{float:left;}
ul#menu li ul li a:link{width:90px;height:37px;line-height:37px;background:#FFF;}
ul#menu li ul li a:hover{color:#CE070E;text-decoration:underline}
ul#menu li ul li{width:90px;height:37px;line-height:37px;float:left;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" language="javascript"> 
$(function(){
 $("ul#menu>li:has(ul)").hover( 
 function(){ 
  $(this).children('a').addClass('red').end().find('ul').fadeIn(400);
 },
 function(){
  $(this).children('a').removeClass('red').end().find('ul').fadeOut(400);
 }
 );
});
</script>
</head>
<body>
<div id="wrap">
 <ul id="menu">
  <li><a href="#" >网站首页</a></li>
  <li><a href="#" >最新动态页</a>
   <ul>
    <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>
   <ul>
    <li><a href="#">时速快递</a> | </li>
    <li><a href="#">太空一号</a> | </li>
    <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>
</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：js exquisite slideshow special effects code sharing_javascript skillsNext article：js exquisite slideshow special effects code sharing_javascript skills

See more

jQuery method to implement fade-in and fade-out secondary drop-down navigation menu_jquery

Related articles