CSS Barre de navigation

Démo: Barre de navigation

• MAISON
• NOUVELLES
• ARTICLES
• FORUM
• CONTACTER
• SUR

---

Barres de navigation

Avoir facile à utiliser la navigation est important pour n'importe quel site web.

Avec CSS, vous pouvez transformer ennuyeux menus HTML dans les barres de navigation de bonne mine.

---

Barre de navigation = Liste des Liens

Une barre de navigation doit HTML standard comme 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, en utilisant le <ul> et éléments <li> prend tout son sens:

Exemple

<ul>
<li><a href="default.asp">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 vous-même »

Maintenant, nous allons extraire les balles et les marges et le remplissage de la liste:

Exemple

ul
{
list-style-type:none;
margin:0;
padding:0;
}

Essayez vous-même »

Exemple expliqué:

• list-style-type: none - Supprime les balles. Une barre de navigation n'a pas besoin de marqueurs de listes
• Réglage des marges et padding à 0 pour supprimer les paramètres par défaut du navigateur

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 nous avons seulement besoin d'un style aux éléments <a>, en plus du code ci-dessus:

Exemple

a
{
display:block;
width:60px;
}

Essayez vous-même »

Exemple expliqué:

• display: block - Affichage des liens que les éléments de bloc rend la zone de liaison toute cliquable (pas seulement le texte), et il nous permet de spécifier la largeur
• Largeur: 60px - éléments Block prendre toute la largeur disponible par défaut. Nous voulons spécifier une largeur de 60 px

Astuce: Jetez aussi un oeil à notre exemple totalement de style de navigation barre verticale .

Remarque: Toujours spécifier la largeur des éléments <a> dans une barre de navigation verticale.Si vous omettez la largeur, IE6 peut produire des résultats inattendus.

---

Barre de navigation horizontale

Il ya deux façons de créer une barre de navigation horizontale. Utilisation en ligne ou flottantéléments de la liste.

Les deux méthodes fonctionnent très bien, mais si vous voulez les liens pour avoir la même taille, vous devez utiliser la méthode flottante.

Lister les objets en ligne

Une manière de créer une barre de navigation horizontale est de préciser les éléments que <li> en ligne, en plus de la "norme" code ci-dessus:

Exemple

li
{
display:inline;
}

Essayez vous-même »

Exemple expliqué:

• display: inline; - Par défaut, les éléments sont des éléments de bloc <li>. Ici, nous supprimons les sauts de ligne avant et après chaque élément de la liste, de les afficher sur une seule ligne

Astuce: Jetez aussi un oeil à notre exemple totalement de style de navigation barre horizontale .

Lister les objets flottants

Dans l'exemple ci-dessus les liens ont des largeurs différentes.

Pour tous les liens pour avoir une largeur égale, faire flotter les éléments <li> et spécifier une largeur pour les éléments <a>:

Exemple

li
{
float:left;
}
a
{
display:block;
width:60px;
}

Essayez vous-même »

Exemple expliqué:

• float: left - utiliser flotteur pour obtenir des éléments de bloc de glisser à côté de l'autre
• display: block - Affichage des liens que les éléments de bloc rend la zone de liaison toute cliquable (pas seulement le texte), et il nous permet de spécifier la largeur
• Largeur: 60px - Depuis éléments de bloc prennent toute la largeur disponible, ils ne peuvent pas flotter à côté les uns aux autres. Nous spécifier la largeur des liens vers 60px

Astuce: Jetez aussi un oeil à notre exemple totalement de style de navigation barre horizontale .