CSS barre de navigation
Avec CSS, vous pouvez transformer les menus ennuyeux HTML dans les barres de navigation de bonne mine.
Barre de navigation = Liste des Liens
Une barre de navigation a besoin HTML standard en tant que base.
Dans nos exemples, nous allons construire la barre de navigation à partir d'une liste standard HTML.
Une barre de navigation est essentiellement une liste de liens, donc en utilisant la
- et
- éléments est parfaitement logique:
Le code dans l'exemple ci-dessus est le code standard utilisé dans les deux barres de navigation verticales et horizontales.
Barre de navigation verticale
Pour construire une barre de navigation verticale, vous pouvez définir le style de la éléments à l'intérieur de la liste, en plus du code ci-dessus:
li a display: block;
largeur: 60px;
>Vous pouvez également définir la largeur
- , et retirer la largeur de , car ils prendront toute la largeur disponible lors de l'affichage comme éléments de bloc. Cela produira le même résultat que notre exemple précédent:
- ou pour centrer les liens.
Ajouter la propriété frontière
- ajouter une bordure autour de la barre de navigation. Si vous souhaitez également les frontières à l'intérieur de la barre de navigation, ajoutez un fond de frontière à tous
- éléments, à l'exception du dernier:
frontière ul: 1px solid # 555;
>li text-align: center;
Border-bottom: 1px solid # 555;
>li: border-bottom last-child: none;
>Pleine hauteur fixe verticale Navbar
Créer une pleine hauteur, navigation latérale « collante »:
Note: Cet exemple peut ne pas fonctionner correctement sur les appareils mobiles.
Barre de navigation horizontale
Il existe deux façons de créer une barre de navigation horizontale. L'utilisation en ligne ou flottant éléments de liste.
Articles Liste Inline
Une façon de construire une barre de navigation horizontale est de préciser la
- inline éléments comme, en plus du code « standard » ci-dessus:
affichage li: inline;
>- display: inline; - Par défaut,
- les éléments sont des éléments de bloc. Ici, on enlève la ligne casse avant et après chaque élément de la liste, pour les afficher sur une ligne
Articles de la liste flottante
Une autre façon de créer une barre de navigation horizontale est de laisser flotter le
- éléments et spécifier une mise en page pour les liens de navigation:
un display: block;
padding: 8px;
background-color: #dddddd;
>Astuce: Ajouter la couleur de fond
- éléments, à l'exception du dernier:
li a display: block;
>Verticale Barre de navigation Exemples
Créer une barre de navigation verticale de base avec une couleur de fond gris et changer la couleur de fond des liens lorsque l'utilisateur déplace la souris sur eux:
/ * Changer la couleur de lien sur vol stationnaire * /
li a: hover background-color: # 555;
Couleur blanche;
>Actif / Courant de navigation Lien
Ajouter une classe « active » du lien actuel pour informer l'utilisateur quelle page il / elle est:
background-color actif: # 4CAF50;
Couleur blanche;
>Centre Liens - Ajouter Borders
Ajouter text-align: center à
- ou pour centrer les liens.