Home>

This is a secondary menu that uses jquery to make a downward slide.This secondary menu has animation effects,And it ’s smoother,Mouse over first level menu,You can slide down the secondary submenu,Relatively practical.

The screenshot of the running effect is as follows:

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=utf-8" />
<title>Secondary menu swipe down</title>
<style type="text/css">
body {margin:0px;padding:0px;font-family:arial, helvetica, sans-serif;background-color:#dedede;color:#333333;position:relative;}
a {text-decoration:none;}
h1, h2, h3, li, ul, dd, dt, dl, input {margin:0px;padding:0px;list-style:none;}
.clear {clear:both;width:0px;height:0px;line-height:0px;overflow:hidden;font-size:0px;display:block;}
img {border:none;}
.top {width:890px;height:68px;margin:0px auto;padding:10px 0px 2px 0px;background-color:#ffffff;}
.logo {width:269px;height:68px;padding:0px 8px 0px 3px;float:left;}
.logo h1 {width:269px;height:68px;background-image:url (images/logo.gif);background-repeat:no-repeat;}
.logo h1 a {display:block;width:269px;height:68px;line-height:68px;font-size:14px;text-indent:-999px;}
.topad {width:610px;height:68px;float:left;}
.dh {width:890px;height:39px;margin:0px auto;background-image:url (images/nvabg.gif);background-repeat:repeat-x;}
.nav {width:785px;height:38px;padding:1px 0px 0px 15px;float:left;}
.nav li {height:38px;line-height:38px;float:left;font-size:14px;padding:0px 20px;color:#ffffff;position:relative;}
.nav li a {color:#ffffff;}
.nav li a:hover {text-decoration:underline;font-size:16px;}
.nav li .ttg {height:auto;background-color:#ffffff;filter:alpha (opacity=80);opacity:0.8;-moz-opacity:0.8;position:absolute;left:0px;top:37px;z -index:1;width:150px;padding:10px 0px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:2px 2px 3px #666666;display:none;}
.nav li .ttg li {width:120px;line-height:30px;font-size:16px;padding:0px 10px;font-family:"Microsoft Yahei";}
.nav li .ttg li a {color:#000;}
.sc {width:90px;height:38px;line-height:38px;float:left;font-size:14px;color:#ffffff;text-align:center;}
.sc a {color:#ffffff;}
.sc a:hover {text-decoration:underline;}
.ad {width:890px;height:auto;margin:10px auto;}
.ad img {float:left;width:445px;overflow:hidden;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document) .ready (function () {
  $(". nav li"). hover (function () {
    $(this) .find (". ttg"). slidetoggle (500);
  });
});
</script>
</head>
<body>
<div>
<div><h1><a href="#">site title text</a></h1></div>
<div></div>
<div></div>
</div>
<div>
<div>
<ul>
<li><a href="#">Home</a>
<div>
<ul>
<li><a href="#">Protein powder</a></li>
<li><a href="#">Fitness plan</a></li>
<li><a href="#">Hot Tags</a></li>
</ul>
</div>
</li>
<li><a href="#">Protein powder</a>
<div>
<ul>
<li><a href="#">Whey Protein Powder</a></li>
<li><a href="#">Muscle powder</a></li>
</ul>
</div>
</li>
<li><a href="#">Fitness plan</a>
<div>
<ul>
<li><a href="#">Breast Exercises</a></li>
<li><a href="#">Calf Exercise</a></li>
<li><a href="#">Abs Workout</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div></div>
</div>
</body>
</html>
  • Previous AngularJS expression detailed explanation and example code
  • Next JavaScript to delete the computer's shutdown key