search

Home  >  Article  >  Web Front-end  >  Fade in and fade out secondary menu effect code implemented by jQuery_jquery

Fade in and fade out secondary menu effect code implemented by jQuery_jquery

WBOY
WBOYOriginal
2016-05-16 15:39:111012browse

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

This is a menu with jQuery added. A seemingly ordinary menu suddenly has flavor and vitality. jQuery1.3.2 is quoted here to make the pop-up secondary menu have a fade-in and fade-out effect. Although the effect itself is It's not eye-catching, but compared to a menu with no effect, in terms of experience, it's already many times better.

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-2l-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>bar</title>
<style type="text/css">
*{margin:0px;padding:0px;font-size:12px;}
ul{list-style-type:none;}
a{text-decoration:none;color:#000;}
#nav{line-height:30px;}
#nav li{float:left;width:100px;}
#nav li a{display:block;width:100px;background:#ccc;text-align:center;}
#nav li a:hover{background:#666;color:#fff;font-weight:bold;}
#nav li ul{line-height:20px;position:absolute;display:none;}
#nav li ul li{float:left;width:130px;}
#nav li ul li a{display:block;width:130px;background:#eee;text-align:left;padding-left:30px;}
#nav li ul li a:hover{background:red;font-weight:normal;}
</style>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
  var key=$("#nav>li");
   key.mouseover(function(){
    $(this).children(".nn1").fadeIn();
   });
   key.mouseout(function(){
    $(this).children(".nn1").fadeOut();
   });
});
</script>
</head>
<body>
<div>
<ul id="nav">
<li><a href="#">第一个</a>
<ul class="nn1">
<li><a href="#">1.0001</a></li>
<li><a href="#">1.0002</a></li>
<li><a href="#">1.0003</a></li>
</ul>
</li>
<li><a href="#">第二个</a>
<ul class="nn1">
<li><a href="#">2.0001</a></li>
<li><a href="#">2.0002</a></li>
<li><a href="#">2.0003</a></li>
</ul>
</li>
<li><a href="#">第三个</a>
<ul class="nn1">
<li><a href="#">3.0001</a></li>
<li><a href="#">3.0002</a></li>
<li><a href="#">3.0003</a></li>
</ul>
</li>
<li><a href="#">第四个</a>
<ul class="nn1">
<li><a href="#">4.0001</a></li>
<li><a href="#">4.0002</a></li>
<li><a href="#">4.0003</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

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

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 implements two navigation menu codes with animation function_jqueryNext article：jQuery implements two navigation menu codes with animation function_jquery

Related articles

See more