Demo: Barres de navigation
Barres de navigation
Avoir la navigation facile à utiliser est important pour tout site web.
Avec CSS vous pouvez transformer les menus HTML ennuyeux en bonne mine les barres de navigation.
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 HTML standard.
Une barre de navigation est essentiellement une liste de liens, donc en utilisant le <ul> et <li> éléments à fait logique:
Exemple
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Essayez - le vous - même » Maintenant, nous allons retirer les balles et les marges et le remplissage de la liste:
Exemple expliqué:
-
list-style-type: none;-list-style-type: none;- Supprime les balles. Une barre de navigation n'a pas besoin de marqueurs de liste - Set
margin: 0;etpadding: 0;pour supprimer les paramètres du navigateur par défaut
Le code dans l'exemple ci-dessus est le code standard utilisé dans les deux barres de navigation verticales et horizontales.
Vertical Barre de navigation
Pour construire une barre de navigation verticale, vous pouvez coiffer les <a> éléments dans la liste, en plus du code ci - dessus:
Exemple expliqué:
-
display: block;- Affichage des liens comme des éléments de bloc rend l'ensemble cliquable zone de liaison (non seulement le texte), et il nous permet de spécifier la width (et le padding, margin, height la padding, margin, height la padding, margin, height , etc. si vous voulez) -
width: 60px;- les éléments de bloc prennent toute la largeur disponible par défaut. Nous voulons spécifier une largeur de 60 pixels
Vous pouvez également définir la largeur de <ul> , et enlever la largeur de <a> , car ils prendront la pleine largeur disponible lors de l' affichage comme éléments de bloc. Ceci va produire le même résultat que l'exemple précédent:
Exemple
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
} Essayez - le vous - même » Vertical Barre de navigation Exemples
Créer une barre de navigation verticale de base avec une couleur de fond gris et changer la couleur des liens en arrière-plan lorsque l'utilisateur déplace la souris sur eux:
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} Essayez - le vous - même » Actif / Current Navigation Lien
Ajouter une classe "active" à la liaison actuelle de laisser l'utilisateur de savoir quelle page il / elle est sur:
Centre Liens & Ajouter Borders
Ajouter text-align:center à <li> ou <a> pour centrer les liens.
Ajouter la border propriété à <ul> ajouter une bordure autour de la barre de navigation. Si vous souhaitez également les frontières à l' intérieur de la barre de navigation, ajouter un border-bottom la <li> border-bottom à tous les <li> éléments, sauf pour la dernière:
Exemple
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} Essayez - le vous - même » Pleine hauteur fixe Vertical Navbar
Créer une pleine hauteur, "sticky" navigation latérale:
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} Essayez - le vous - même » Remarque: Cet exemple pourrait ne pas fonctionner correctement sur les appareils mobiles.
Navigation Barre horizontale
Il existe deux façons de créer une barre de navigation horizontale. Utilisation enligne ou flottantéléments de liste.
Liste Inline Articles
Une façon de construire une barre de navigation horizontale est de spécifier les <li> éléments comme inline, en plus du "standard" code ci - dessus:
Exemple expliqué:
-
display: inline;- Par défaut, <li> éléments sont des éléments de bloc. Ici, nous supprimons la ligne brise avant et après chaque élément de la liste, pour les afficher sur une seule ligne
Flottant Liste Articles
Une autre façon de créer une barre de navigation horizontale est de flotter les <li> éléments, et spécifier une mise en page pour les liens de navigation:
Exemple
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
} Essayez - le vous - même » Exemple expliqué:
-
float: left;- l' utilisation du flotteur pour obtenir des éléments de bloc pour glisser à côté de l'autre -
display: block;- Affichage des liens comme des éléments de bloc rend l'ensemble cliquable zone de liaison (non seulement le texte), et il nous permet de spécifier le rembourrage (et height, width, margins la height, width, margins les height, width, margins , etc. si vous voulez) -
padding: 8px;- Depuis des éléments de bloc prennent toute la largeur disponible, ils ne peuvent pas flotter à côté de l'autre. Par conséquent, spécifier certains types de remplissage pour les faire paraître bonne -
background-color: #dddddd;- Ajouter un background-color gris pour chacun un élément
Astuce: Ajouter le background-color à <ul> au lieu de chaque <a> élément si vous voulez une couleur de fond pleine largeur:
Navigation Horizontal Bar Exemples
Créer une barre de navigation horizontale de base avec une couleur de fond sombre et changer la couleur des liens en arrière-plan lorsque l'utilisateur déplace la souris sur eux:
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} Essayez - le vous - même » Actif / Current Navigation Lien
Ajoutez un "active" classe pour le lien en cours de laisser l'utilisateur de savoir quelle page il / elle est sur:
Liens droit Aligner
Liens droit align par flottage éléments de la liste à droite ( float:right; ):
Exemple
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> Essayez - le vous - même » Diviseurs frontaliers
Ajouter la border-right propriété à <li> Pour créer un lien diviseurs:
Exemple
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} Essayez - le vous - même » Barre de navigation fixe
Faire de la barre de navigation séjour en haut ou en bas de la page, même lorsque l'utilisateur fait défiler la page:
Note: Ces exemples pourraient ne pas fonctionner correctement sur les appareils mobiles.
Gris Horizontal Navbar
Un exemple d'une barre de navigation horizontale gris avec une bordure grise mince:
Exemple
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Essayez - le vous - même » 
Autres exemples
topnav Responsive
Comment utiliser CSS3 questions des médias pour créer une navigation supérieure réactive.
sidenav Responsive
Comment utiliser CSS3 questions des médias pour créer une navigation réactive côté.
dropdown Navbar
Comment ajouter un menu déroulant dans une barre de navigation.