A simple JQUERY drop-down menu plug-in

1. Follow the Convention to first add the DOM Structure
<Div id = "menu">
<Ul>
<Li>
<A href = "# nogo"> Main Menu 1 </a>
<Ul>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 1 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 1 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 1 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 1 </a> </li>
</Ul>
</Li>
 
<Li>
<A href = "# nogo"> Main Menu 2 </a>
<Ul>
<Li> <a href = "http://usual.blog.51cto.com"> sub-Menu 2 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-Menu 2 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-Menu 2 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-Menu 2 </a> </li>
</Ul>
</Li>
 
<Li>
<A href = "# nogo"> Main Menu 3 </a>
<Ul>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 3 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 3 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 3 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 3 </a> </li>
</Ul>
</Li>
 
<Li>
<A href = "# nogo"> Main Menu 4 </a>
<Ul>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 4 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 4 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 4 </a> </li>
<Li> <a href = "http://usual.blog.51cto.com"> sub-menu 4 </a> </li>
</Ul>
</Li>

</Ul>


</Div>
2. With the DOM structure, determine the style
# Menu {
Font-family: Helvetica;
}
# Menu ul {
List-style: none;
Margin: 0px;
Padding: 0px;
Width: 250px;
}
# Menu ul li {
Margin: 1px 0px;
Padding: 0px;

}
# Menu ul li {
Height: 30px;
Line-height: 30px;
Padding-left: 10px;
Display: block;
Text-decoration: none;
Font-weight: bold;
Color: #333;
Font-size: 16px;
Border: 1px solid # ccc;
}
# Menu ul li a: Hover {
Background: # a0b4dc;
}
# Menu ul li {
Border: none;
Height: 25px;
Line-height: 25px;
}
# Menu ul li a: hover {
Background: yellow;
}
# Menu ul li ul {
Display: none;
}
3. Then the most important JQUERY part
 
(Function ($ ){
$. Fn. slideMenu = function (){
Return this. each (function (){
Var menu = $ (this );
Menu. find ("ul li> a"). bind ("click", function (event ){
Var currentLink = $ (event. currentTarget );
If (currentLink. parent (). find ("ul. active "). size () = 1) {// If the clicked connection sub-menu is displayed, hide the sub-menu
Hide (currentLink );

}
Else if (menu. find ("ul li ul. active "). size () = 0) {// If none of the sub-menus are displayed, the clicked sub-menus are displayed.

Show (currentLink );

}
Else {// show the clicked sub-menu to hide the displayed sub-menu
Menu. find ("ul li ul. active"). slideUp ("medium", function (){

Menu. find ("ul li ul"). removeClass ("active ");
Show (currentLink );

});
}
 
 
 
});
Var show = function (currentLink) {// shows the sub-menu Method
CurrentLink. parent (). find ("ul"). addClass ("active ");
CurrentLink. parent (). find ("ul"). slideDown ("medium ");

}
 
Var hide = function (currentLink) {// hide the sub-menu Method
CurrentLink. parent (). find ("ul"). removeClass ("active ");
CurrentLink. parent (). find ("ul"). slideUp ("medium ");

}
});
}
 
 
}) (JQuery );
4. reference.
$ (Document). ready (function (){
$ ("# Menu"). slideMenu ();
})
 
Author: "front-end attack-usual"