CSS

Bootstrap

Menu bootstrap à multiples niveaux

Contrairement à « Foundation 5 », la fameuse barre de navigation Bootstap 3 permet un seul sous-niveau du menu. C’est déjà pas mal et c’est même grandement conseillé puisqu’une arborescence trop lourde apporte son lot de problème. En premier lieu celui de complexifier ce qui devrait être simple, intuitif et accessible.

Par contre Bootstrap n’offre aucune solution pour utiliser des sous-menus. On peut toujours insérer un « menu déroulant » (dropdown) mais l’exercice peut s’avérer difficile au niveau du « responsive ».

Voilà donc une solution en pur CSS toute simple pour palier à ce problème. L’ajout d’une classes « sous-menu » et le tour est joué. Pour une meilleurs compatibilité (francophile mais quand même pas fanatique) avec bootstrap « dropdown-submenu ». Essentiellement une reproduction du style « vanilla ».

<style>
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
</style>

Chaque sous niveau doit avoir la classe « dropdown-submenu ».

<nav class="navbar navbar-default" role="navigation">
  <div class="collapse navbar-collapse" id="oNavigation">
    <ul class="nav navbar-nav">
      <li><a href="#">Accueil</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Section A <b class="caret"></b> </a> 
        <ul class="dropdown-menu">
          <li><a href="#">Deuxième niveau</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Section B <b class="caret"></b> </a> 
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Sous-section</a>
            <ul class="dropdown-menu">
              <li><a href="#">Troisième niveau</a></li>
              <li><a href="#">Troisième niveau</a></li>
              <li class="dropdown-submenu">
                <a href="#">Sous-section</a>
                <ul class="dropdown-menu">
                  <li><a href="#">Quatrième niveau</a></li>
                  <li class="dropdown-submenu">
                    <a href="#">Sous-section</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Cinquième niveau</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Deuxième niveau</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Résultat