Implémentation du menu accordéon multi-niveaux jQuery

Cet article présente principalement jQuery pour implémenter un menu accordéon à plusieurs niveaux. L'effet de menu est plus distinctif. Les amis qui en ont besoin peuvent s'y référer

Le menu accordéon est généralement utilisé pour la navigation déroulante. L'apparence est très simple, il est facile à utiliser. L'accordéon doit son nom à sa capacité à s'étirer et à se rétrécir. L'application appropriée de l'effet accordéon dans le projet apportera une très bonne expérience à l'utilisateur. Cet article utilise le plug-in jQuery pour créer facilement un très bon menu d'effet accordéon.

HTML
Première référence à jQuery et au plug-in entre les têtes.

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

Ensuite, écrivez le code du corps du menu entre les corps. Le code HTML sera constitué d'une série de listes non ordonnées.

<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
Bien sûr, nous devons ajouter des styles à cette liste non ordonnée pour la rendre très Présenté de manière concise à l’écran.

.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
Appelez le plug-in accordéon, définissez les propriétés pertinentes et un bel accordéon l'effet est terminé.

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

Accordéon fournit les paramètres d'options suivants :
vitesse : millisecondes numériques, définissez l'heure à laquelle le menu se développe et se ferme.
closedSign : lorsque le menu de niveau inférieur est fermé, le contenu affiché à côté du menu peut être n'importe quel code HTML ou texte.
openedSign : lorsque le menu subordonné est développé, le contenu affiché à côté du menu peut être n'importe quel code HTML ou texte.
Notez que si vous souhaitez que le menu se développe lors de son chargement initial, vous pouvez ajouter class="active" au li correspondant à développer.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Code JS pour implémenter un menu pliant vertical gris argenté avec une sensation tridimensionnelle 3D

Opérations jquery sur les attributs inhérents aux éléments : prop() et removeProp()

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!