This article illustrates the two-level Drop-down navigation method of jquery to achieve the effect of drawing. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Two-level Slide Guide Menu </title>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" src= "Jquery.effects.core.min.js" ></script>
<style type= "Text/css" >
body{font-size:12px font-family:arial, Helvetica, Sans-serif; margin:0; padding:10px;
. nav_list{List-style:none; margin:0; padding:0;}
. nav_list li{float:left; text-align:center; margin-right:10px; Position:relative;}
. nav_list Li a{width:80px text-align:center; padding:4px 0; Text-decoration:none;color: #ccc; background: #996666; Display:block; Float:left;}
. nav_list Li a.current{width:80px text-align:center; padding:4px 0; Text-decoration:none;color: #fff; background: #f00 ; Display:block; Float:left;}
. nav_list li div.second{color: #999999; height:0px; overflow:hidden; position:absolute; left:0; top:22px; width:80px;}
. nav_list Li Div.second a{background: #666666; color: #fff; Border:none; width:80px; BORDER-TOP:1PX Solid
#FFFFFF; padding:5px 0;}
</style>
<script type= "Text/javascript" >
$ (function () {
Menu (". Nav_list");
});
function Menu (ul_class_name) {
Second (". Nav_list");
var li_name = ul_class_name+ "" + "Li";
$ ("Div.second"). CSS ("opacity", "0.1");
$ (li_name). Hover (
function () {
var a_height = $ (this). Children ("Div.second A:first"). CSS ("height");
var A_count = $ (this). Children ("Div.second"). Children ("a"). Length;
var slide_hieght = (parseint (a_height) +11) *a_count;
$ (this). Children ("Div.second"). Stop (). Animate ({height:slide_hieght+ "px", opacity: "0.9"},600);
$ (this). Children ("a:not (. Current)"). Stop (). Animate ({backgroundcolor: "#f00", Color: "#fff"},800);
},function () {
$ (this). Children ("Div.second"). Stop (). Animate ({height: "0px", opacity: "0.1"},600);
$ (this). Children ("a:not (. Current)"). Stop (). Animate ({backgroundcolor: "#996666", Color: "#ccc"},800);
});
}
function Second (ul_class_name) {
var second_menu = ul_class_name+ "" + "Li" + "" + "Div.second" + "" + ">" + "" + "a";
$ (second_menu). Hover (
function () {
$ (this). Stop (). Animate ({backgroundcolor: "#000", Opacity: "1"},400);
},function () {
$ (this). Stop (). Animate ({backgroundcolor: "#666", Opacity: "0.9"},400);
});
}
</script>
<body>
<ul class= "Nav_list" >
<li>
<a href= "#" class= "current" >Test_1</a>
<div class= "Second" >
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
</div>
<li>
<li>
<a href= "#" >Test_2</a>
<div class= "Second" >
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
<a href= "#" >menu_1</a>
</div>
<li>
<li>
<a href= "#" >Test_3</a>
<div class= "Second" >
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
<a href= "#" >menu_3</a>
</div>
<li>
<li>
<a href= "#" >Test_4</a>
<div class= "Second" >
<a href= "#" >menu_4</a>
<a href= "#" >menu_4</a>
<a href= "#" >menu_4</a>
</div>
<li>
<li>
<a href= "#" >Test_5</a>
<div class= "Second" >
<a href= "#" >menu_5</a>
<a href= "#" >menu_5</a>
<a href= "#" >menu_5</a>
</div>
<li>
</ul>
<div style= "width:800px; Clear:both; padding:10px; " >
<p> This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text it is a passage this is a text this is a paragraph of text This it's a text, it's a piece of text, it's a text, it's a paragraph of text it's a text it's a text it's a text it's a piece of text It's a text, it's a text, it's a piece of text it's a text it's a text it's a piece of text it's a piece of text it's a piece of text a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text it is a passage this is a paragraph of text This is a paragraph of text this is A paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text it is a passage that is a paragraph of text This is a paragraph of text This is a paragraph text this is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a piece of writing this is a paragraph of text This is a paragraph of text this is a Paragraph text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text This is a paragraph of text </p>
</div>
</body>
I hope this article will help you with your jquery programming.
