Sommaire

Les menus en accordéon

Les menus en accordéon sont tout aussi pratiques à implémenter lorsque vous disposez de peu de place.

Attention les menus en accordéon utilisent eux aussi du JavaScript.

Nous allons utiliser une structure en menu vertical avec un élément <ul> qui va exploiter l’attribut data-accordion-menu. Chaque item comportant un menu hiérarchique sera placé dans un élément <ul> avec les classes .menu, .vertical et .nested. Si vous souhaitez qu’un item soit déjà ouvert, ajoutez la classe .is-active.

Voici le code HTML de cet exemple :

<div style="width: 300px;"> 
      <ul class="vertical menu" data-accordion-menu> 
        <li> 
          <a href="#">Le matériel</a> 
          <ul class="menu vertical nested is-active"> 
            <li> 
              <a href="#">Les logiciels</a> 
              <ul class="menu vertical nested"> 
                <li><a href="#">Adobe Photoshop</a></li> 
                <li><a href="#">Affinity Photo</a></li> 
       ...