jquery Multilevel Accordion Menu Example explain _jquery

Accordion menu is generally used for pull-down navigation, because the appearance is very concise, use up with the accordion can stretch and contraction of the name, the appropriate application of the accordion effect will give users a very good experience. This article uses the jquery plug-in to easily create a very good accordion effect menu.

Html
First, you reference jquery and Plug-ins between the head.

<script type= "Text/javascript" src= "js/jquery.js" ></script> 
<script type= "Text/javascript" src= "Js/accordion.js" ></script> 

Next, the menu body code is written between the bodies, and the HTML code will consist of a series of unordered lists.

<ul class= "NAV" > <li><a href= "http://www.jb51.net" > Home </a></li> <li><a href= " # "> Services </a></li> <li><a href=" # "> Case </a></li> <li><a href=" # "> Article & 
      lt;/a></a> <ul> <li><a href= "#" target= "_blank" >XHTML/CSS</a></li> <li><a href= "#" >Javascript/Ajax/jQuery</a> <ul> <li><a href= "#" ; Cookies</a></li> <li><a href= "#" >Event</a></li> <li><a href= "#" >Games</a></li> <li><a href= "#" >Images</a></li> </ul > </li> <li><a href= "#" target= "_blank" >PHP/MYSQL</a></li> <li&gt ; <a href= "#" target= "_blank" > Front-end observation </a></li> <li><a href= "#" target= "_blank" >html5/move we 
b Application </a></li>    </ul> </li> <li><a href= "#" > About </a></li> </ul> 
 

Css
Of course, we're going to add a style to this unordered list so that it's very simple to present on the screen.

. nav {width:213px; padding:40px 28px 25px 0;} 
Ul.nav {padding:0; margin:0; font-size:1em; line-height:0.5em; list-style:none;} 
Ul.nav li {} 
ul.nav li a {line-height:10px; font-size:14px; padding:10px 5px; color: #000; display:block; 
Text-decoration:none; Font-weight:bolder;} 
Ul.nav li a:hover {background-color: #675C7C;  Color:white;} 
Ul.nav ul {margin:0; padding:0;display:none;} 
Ul.nav ul li {margin:0; padding:0; clear:both;} 
Ul.nav ul Li a {padding-left:20px; font-size:12px; font-weight:normal;} 
Ul.nav ul li a:hover {background-color: #D3C99C; color: #675C7C;} 
Ul.nav ul ul Li a {color:silver; padding-left:40px;} 
Ul.nav ul ul Li a:hover {background-color: #D3CEB8; color: #675C7C;} 
Ul.nav Span{float:right;} 

Jquery
Call the accordion plug-in, set the related properties, a beautiful accordion effect is complete.

$ (function () { 
  $ (". Nav"). Accordion ({ 
    speed:500, 
    closedsign: ' [+] ', 
    openedsign: ' [-] ' 
  }); 
}; 

Accordion provides the following option settings:
Speed: The number of milliseconds to set the time for the menu to expand and close.
Closedsign: The content that appears next to the menu when the subordinate menu is closed, can be any HTML or text.
Openedsign: When the subordinate menu expands, the content that appears next to the menu can be any HTML or text.
Note that if you want the menu to start when it is loaded, you can add class= "active" to the Li that corresponds to the expansion.

is not read this article, there is no want to put their original menu abandoned, then hurry up and make their website a brand-fresh.