JQuery implements level-2 drop-down navigation with animation Effects
This article mainly introduces jQuery's second-level drop-down navigation method with animation effects. It involves jQuery's skills for operating css styles and mouse events. It is very useful. For more information, see
This article describes how jQuery implements a two-level drop-down navigation method with animation effects. Share it with you for your reference. The specific implementation method is as follows:
The 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> jQuery second-level slide 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. 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" pai.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 "+" "+"> "+" "+" ";
$ (Second_menu). hover (
Function (){
$ (This). stop (). animate ({backgroundColor: "#000", opacity: "1"}, 400 );
}, Function (){
$ (This). stop (). animate ({backgroundColor: "#666", opacity: "0.9"}, 400 );
});
}
</Script>
</Head>
<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 text, this is a text A text, a text, a text text, text, text this is a text, this is a text, this is a text A text, a text, a text text: a text, a text </p>
</Div>
</Body>
</Html>
I hope this article will help you with jQuery programming.
