Examples of jQuery multi-level accordion menu and jquery examples

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.