Implementation of jQuery multi-level accordion menu

This article mainly introduces jQuery to implement multi-level accordion menu. The menu effect is more distinctive. Friends who need it can refer to it

Accordion menu is generally used for drop-down navigation. Because the appearance is very simple, it is similar to use. The accordion is named after it can stretch and shrink. 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 in the head.

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

Next, write the menu body code between the bodies. The HTML code will consist of a series of unordered lists.

<ul class="nav"> 
  <li><a href="//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>

CSS
Of course, we need to add styles to this unordered list to make it very concise presented 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 relevant properties, and a beautiful accordion effect is completed.

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

Accordion provides the following option settings:
speed: digital milliseconds, set the time for the menu to expand and close.
closedSign: When the lower-level 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.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

JS code to implement a silver-gray vertical folding menu with a 3D three-dimensional feel

jquery Operations on element intrinsic attributes: prop() and removeProp()

The above is the detailed content of Implementation of jQuery multi-level accordion menu. For more information, please follow other related articles on the PHP Chinese website!