Trucsweb.com

Trucsweb.com

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, NavigationMenu bootstrap à multiples niveaux

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
      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
                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)

                  • Salut. Merci bien pour le tuyau. J'ai vraiment galeré avec ca.
                    64x64
                    Mamadou
                    Date (GMT) : 2020-05-21 13:41:43 (UTC +0000)
                    Date local : Thu May 21 2020 13:42:41 GMT+0000 (heure moyenne d
                    • Ça me fait plaisir, Bonne journée l'ami.
                      64x64
                      oznog
                      Date (GMT) : 2020-05-21 13:47:57 (UTC +0000)
                      Date local : Thu May 21 2020 09:48:55 GMT-0400 (heure d’été de


                    • Comme mon pseudo le laisse supposer, je ne suis pas une "jeunesse". Ceci dit, j'avance à mon rythme, étant entièrement autodidacte. Aussi, après les sites ancienne formule, avant l'utilisation des tablettes et smartphones, j'ai dû me former afin d'adapter mon travail à ces supports, sauf que, n'ayant pas le budget pour utiliser du matériel Apple, je ne me suis aperçue que très récemment que ce qui fonctionnait sur la plupart des navigateurs courants, n'était pas le cas avec Safari... Je me suis donc mise en recherche pour rendre mon travail compatible avec ce navigateur et, miracle, j'ai trouvé ici ce dont j'avais besoin. Et, même si toutes mes pages ne sont pas encore opérationnelles, le plus dur est fait puisque je sais maintenant comment procéder. Alors, un très grand merci de la part d'une mamie de 74 ans.
                      64x64
                      Cybermamie
                      Date (GMT) : 2021-08-26 11:02:26 (UTC +0000)
                      Date local : Thu Aug 26 2021 13:10:31 GMT+0200 (heure d’été d’E
                      • Ça me fait plaisir, d'un cyberpapie!
                        64x64
                        oznog
                        Date (GMT) : 2021-08-26 11:16:36 (UTC +0000)
                        Date local : Thu Aug 26 2021 07:24:41 GMT-0400 (heure avancée d


                      Ajouter un commentaire
                      Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
                      Votre évaluation du tutoriel

                      9.5/10 sur 2 revues.
                             Visites : 67540 - Pages vues : 70739
                      X

                      Trucsweb.com Connexion

                      Connexion

                      X

                      Trucsweb.com Mot de passe perdu

                      Connexion

                      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

                      Créer un compte

                      .
                      @