Home>

This is a menu with jquery added. A seemingly ordinary menu suddenly smells and comes alive.Here reference jquery1.3.2,Let the pop-up secondary menu have the effect of fading in and out,Although the effect itself is not eye-catching,But compared to a menu with no effect,From experience,It has been many times stronger.

The online demo address is as follows:

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>
<li><a href="#">First</a>
<ul>
<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="#">The second</a>
<ul>
<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="#">Third</a>
<ul>
<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="#">Fourth</a>
<ul>
<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>
  • Previous Example of the most basic location function implementation in iOS development
  • Next Talking about PowerShell catching errors
  • Trends