Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

CSS

Bootstrap

RDFFav

Menu bootstrap à multiples niveaux

La fameuse barre de navigation Bootstap 3 permet un seul sous-niveau. Voilà donc une solution en CSS toute simple à ce problème.Menu, Bootstrap, Navigation

B

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 ».


Feuille de style CSS CSS
<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 ».

Liste à puce HTML HTML
<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

Sous menu Bootstrap

« SmartMenus jQuery »

Un module complémentaire pour votre librairie Bootstraps 3. Faire une barre de navigation à plusieurs niveaux plus sophistiqués avec « SmartMenus jQuery » et « SmartMenus jQuery Bootstrap ».


, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • Super pratique, j'ai cherché pendant un moment comment faire, ça va bien m'aider. Merci beaucoup.
    64x64
    Nico

    Date (GMT) : 2015-01-31 04:14:10 (UTC +0000)
    • Ça me fait plaisir. C'est justement fait pour aider.
      64x64
      oznog
      http://www.trucsweb.com
      Date (GMT) : 2015-1-31 15:28:11 (UTC +0000)


    • Tout travail mérite reconnaissance, alors bravo et merci !
      64x64
      Chicharlito

      Date (GMT) : 2015-03-04 17:1:26 (UTC +0000)

      • Merci beaucoup pour ce morceau de code qui va m'aider grandement. J'ajoute ton site dans mes marques pages
        64x64
        Sromert

        Date (GMT) : 2015-03-10 10:06:57 (UTC +0000)

        • Olala une journée que je n'arrive pas à faire fonctionne les sous-menu et que je cherche et là miracle je tombe sur ton site ! Merci beaucoup vraiment !
          64x64
          Cousin

          Date (GMT) : 2016-04-15 12:57:5 (UTC +0000)

          • Bien le menu mais on a vite un probléme avec les mobile ... Bon travail si tu as une solution
            64x64
            daems

            Date (GMT) : 2016-05-30 6:27:58 (UTC +0000)

            • Un grand merci pour l'interface web mais concernant les mobile il faut qu'on creuse encore ! Thanks a lot :)
              64x64
              libakh

              Date (GMT) : 2016-07-14 12:45:9 (UTC +0000)

              • Bonjour, J'ai crée un menu qui contient les catégories et les sous catégories, pour les ordinateurs le menu fonctionne bien et pour les tablettes aussi, mais le probléme c'est que les sous categories n'ouvrent pas sur les telephones mobiles; quand on cliques sur les sous-catégories la navigation ne se poursuit pas. j'ai besoin de votre aide, je crois qu'il faut ajouter un code CSS!! Merci.
                64x64
                amine
                http://www.hayati.info
                Date (GMT) : 2016-10-06 18:0:8 (UTC +0000)

                • Super, vous m'avez bien dépanné !
                  64x64
                  Chaton

                  Date (GMT) : 2018-02-15 08:51:11 (UTC +0000)
                  Date local : Thu Feb 15 2018 09:52:13 GMT+0100 (Paris, Madrid)

                  9,5/10 sur 2 revues.
                         Visites : 50710 - Pages vues : 53261
                  X

                  Trucsweb.com Connexion

                  X

                  Trucsweb.com Mot de passe perdu

                  X

                  Trucsweb.com Conditions générales

                  Conditions

                  Responsabilité

                  La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

                  Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

                  Droit applicable et juridiction compétente

                  Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

                  X

                  Trucsweb.com Trucsweb

                  X

                  Trucsweb.com Glossaire

                  X

                  Trucsweb.com Trucsweb

                  X

                  Trucsweb.com Trucsweb

                  Conditions

                  Aucun message!

                  Merci.

                  X
                  Aucun message!
                  X

                  Trucsweb.com Créer un compte