jQuery multi-level accordion menu example explanation

jQuery multi-level accordion menu example explanation_jquery

WBOY

Release： 2016-05-16 15:35:38

Original

1276 people have browsed it

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

HTML
First reference jQuery and the plug-in between the head.

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

Copy after login

Next, write the menu body code 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">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">文章</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><a href="#" target="_blank">前端观察</a></li> 
      <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> 
    </ul> 
  </li> 
  <li><a href="#">关于</a></li> 
</ul>

Copy after login

CSS
Of course, we need to add styles to this unordered list to make it appear on the screen very concisely.

.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;}

Copy after login

jQuery
Call the accordion plug-in, set the relevant properties, and a beautiful accordion effect is completed.

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

Copy after login

Accordion provides the following option settings:
speed: digital milliseconds, set the time for menu expansion and closing.
closedSign: When the subordinate menu is closed, the content displayed next to the menu can be any html or text.
openedSign: When the subordinate menu is expanded, the content displayed next to the menu can be any html or text.
Note that if you want the menu to expand when it is initially loaded, you can add class="active" to the corresponding li to be expanded.

After reading this article, do you want to abandon your original menu? Then act quickly to give your website a brand new look.