Latest web development tutorials

CSS barre de navigation

Exemple: Barre de navigation


barre de navigation

navigation utilisation qualifiée pour tout site web est très important.

Avec CSS, vous pouvez convertir en un joli bar au lieu de menus HTML ennuyeux de navigation.


Liens Navigation list =

Comme une barre de navigation standard HTML est un must

. Dans notre exemple, nous allons créer une liste de HTML barre de navigation standard.

La barre de navigation est essentiellement une liste de liens, donc utiliser <ul> et <li> éléments sont très significatifs:

Exemples

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

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

Exemples

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

Essayez »

Exemples d'analyse:

  • list-style-type: none - avant de retirer la liste des petits drapeaux. Une barre de navigation n'a pas besoin de marqueurs de liste
  • Supprimer réglage par défaut marges et le remplissage de jeu du navigateur à 0

L'exemple de code ci-dessus est dans les codes à barres de navigation verticale et horizontale standard utilisés.


barre de navigation verticale

Le code ci-dessus, nous avons seulement besoin des éléments de style <a>, l'établissement d'une barre de navigation verticale:

Exemples

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

Essayez »

L'exemple montre:

  • display: block - affichage des liens élément de bloc, de sorte que l'ensemble devient un lien zone cliquable (et pas seulement du texte), ce qui nous permet de spécifier la largeur
  • largeur: 60px - éléments de bloc par défaut est la largeur maximale. Nous voulons spécifier une largeur de 60 pixels

Astuce: Voir exemple d'une barre de navigation verticale entièrement de style .

Remarque: Assurez - vous de spécifier la largeur de l'élément dans la navigation verticale bar <a> 's.Si vous omettez la largeur, IE6 peut produire des résultats inattendus.


Barre de navigation horizontale

Il existe deux façons de créer une barre de navigation horizontale. Utilisez les éléments de listeinline ou flottantes.

Les deux méthodes sont très bien, mais si vous voulez faire un lien vers la même taille, vous devez utiliser la méthode flottante.

éléments de liste Inline

Un pour construire une barre de navigation horizontale est de spécifier

  • Element, le code ci-dessus est la norme intégrée:

    Exemples

    li
    {
    display:inline;
    }

    Essayez »

    Des exemples d'analyse:

    • display: inline; - Par défaut, <li> élément est un élément de bloc. Ici, on enlève les sauts de ligne avant et après chaque élément de la liste, pour afficher la ligne.

    Astuce: Voir exemple d'une barre de navigation horizontale entièrement de style .

    Flottant éléments de liste

    Dans les exemples de liens ci-dessus ont des largeurs différentes.

    Pour tous les maillons de largeur égale, float <li> et spécifier la largeur de l'élément <a>:

    Exemples

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

    Essayez »

    Des exemples d'analyse:

    • float: left - utiliser les diapositives de l'élément de curseur à côté de l'autre
    • display: block - affichage des liens élément de bloc, de sorte que l'ensemble devient un lien zone cliquable (et pas seulement du texte), ce qui nous permet de spécifier la largeur
    • largeur: 60px - éléments de bloc par défaut est la largeur maximale. Nous voulons spécifier une largeur de 60 pixels

    Astuce: Voir exemple d'une barre de navigation horizontale entièrement style. .