Examples of jQuery multi-level accordion menu and jquery examples

Examples of jQuery multi-level accordion menu and jquery examples

The accordion menu is generally used for drop-down navigation. Because the appearance is very simple, it can be stretched and shrunk like the accordion, and the proper application of the accordion effect in the project will bring a good user experience. This article uses the jQuery plug-in to easily create a very good accordion menu.

HTML
First, 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, write the menu subject code between the bodies, and the HTML code will be composed of a series of unordered lists.

<Ul class = "nav"> <li> <a href = "http://www.bkjia.com"> Home </a> </li> <a href = "#"> Service </a> </li> <a href = "#"> case </a> </li> <a href = "#"> Article </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> <a href = "#"> Event </a> </li> <a href = "#"> Games </a> </ li> <a href = "#"> Images </a> </li> </ul> </li> <a href = "#" target = "_ blank"> PHP/MYSQL </a> </li> <a href = "#" target = "_ blank"> frontend observation </> </li> <a href = "#" target = "_ blank"> HTML5/mobile WEB applications </a> </li> </ul> </li> <a href = "#"> about </a> </li> </ul>

CSS
Of course, we need to add a style for this unordered list to make it very concise and displayed 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 to set relevant attributes. A beautiful accordion effect is complete.

$(function(){   $(".nav").accordion({     speed: 500,     closedSign: '[+]',     openedSign: '[-]'   }); }); 

Accordion provides the following options:
Speed: The number in milliseconds. Set the time when the menu is expanded or closed.
ClosedSign: when the lower menu is closed, the content next to the menu can be any html or text.
OpenedSign: When a sub-menu is expanded, the content next to the menu can be any html or text.
Note: If you want to expand the menu during initial loading, you can add class = "active" to the corresponding expanded li ".

Do you want to discard your original menu after reading this article? Hurry up and make your website look new.