Home > Web Front-end > JS Tutorial > body text

Implementation of jQuery multi-level accordion menu

不言
Release: 2018-07-02 13:52:34
Original
1556 people have browsed it

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>
Copy after login

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>
Copy after login

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;}
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: &#39;[+]&#39;, 
    openedSign: &#39;[-]&#39; 
  }); 
});
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template