Catégories
Uncategorized

Créer des menus de navigation avec Bootstrap 4


Un menu de navigation est une liste de liens permettant de parcourir les pages et les ressources (fichier, image, email, etc.) de votre site. Il est édité avec la classe nav.

La navigation de base est construite avec flexbox.

Menu simple

Voici un exemple de menu avec 4 liens.

Afficher:

Vous remarquez que, par défaut, Bootstrap n’inclut pas le lien actif. C’est à vous de le faire avec une instruction CSS.

Dans l’exemple ci-dessous, le lien actif est affiché en orange:

.active{
    color: orange;
}

Afficher:

Menu simplifié

Il est possible d’alléger le code en supprimant la balise

    et travailler avec la sémantique nav.

    Sémantiquement la balise

Afficher:

Le bouton déroulant partagé

Nous combinons le bouton texte (inactif) et le bouton curseur (sur lequel nous cliquons pour développer) pour former un seul bouton groupe btn.

Afficher:

Vous remarquez que le curseur est plus espacé et mieux aligné avec le texte du bouton.

Le bouton ne se développe pas si vous cliquez sur le texte.

En-tête de menu

Vous pouvez ajouter des en-têtes pour créer des sections de sous-menu avec en-tête déroulante .

Afficher:

Séparateur de menu

Les groupes de sous-menus peuvent être séparés par un bloc de séparation liste déroulante.

Afficher:

Liste non liée

Avec Bootstrap version 4, vous pouvez remplacer tous les liens par boutons

Afficher:

Le menu déroulant simple

Intégrez simplement le bloc déroulant ( menu déroulant ) dans un menu simple ( nav ).

Afficher:

Le lien qui est déroulant doit avoir la bascule déroulante de classe.

Barre de navigation réactive

Une barre de navigation, souvent située en haut de page, comprend des liens mais aussi le logo (ou la marque). Il peut contenir du texte, des icônes et des éléments de formulaire.

Sur les petits écrans, les liens de navigation sont masqués et remplacés par un bouton qui les déroule lorsqu’on clique dessus.

La barre est créée avec barre de navigation.

Le point d’arrêt (mode mobile) est défini par navbar-expand- * . Remplacer * par sm, md, lg ou xl.

Affichez le logo ou la marque avec marque-navbar.

Puis placez le bouton navbar-toggler et son icône de barre icône de bascule de la barre de navigation pour le mode mobile.

Intégrez ensuite les liens de navigation dans un bloc navbar-collapse.

Affichage à partir d’une taille d’écran de 992 pixels (lg):

Affichage du menu développé sur un écran mobile:

Avec menu déroulant

Il vous suffit d’intégrer le bloc déroulant ( menu déroulant ) dans un menu.

Affichage normal:

Affichage du menu entièrement déplié sur mobile:

Icône de barre sur la gauche

Si pour des raisons d’ergonomie, vous souhaitez placer l’icône de la barre à gauche, vous devez éditer le logo (ou la marque) après le bouton.

Afficher:



Source link