Html & code css pour une barre de navigation avec un coin arrondi

La liste Unordered

• Voici le code pour une liste non ordonnée de base qui deviendra une barre de navigation:

• Certains page
• Une autre page

Notez que chaque élément de la liste - créée par le "

" tag - est enveloppé dans un élément de liste ou "
• " paire de balises. Étant donné que les visiteurs du site doivent cliquer sur les éléments dans la liste, vous devez utiliser la balise d`ancrage pour créer des liens sur chaque élément de liste.

Retirer défaut Styling

• Avant de pouvoir coiffer une liste à puces dans une barre de navigation, vous devez dépouiller les styles par défaut. Si vous utilisez une feuille de style de remise à zéro, tel que celui créé par Eric Meyers, vous pouvez sauter cette étape. Dépouillant style par défaut nécessite le réglage de la "list-style" immeuble à "aucun" pour enlever les balles, puis vous devez supprimer à la fois la marge de gauche et le rembourrage gauche. Le code CSS ressemble à ceci:

  ul {

  list-style: none;

  margin-left: 0;

  padding-left: 0;

  }

Faire la liste horizontale

• 
  
  
  
  

  Bien que certains sites utilisent des menus sidebar pour la navigation, l`orientation de la barre de navigation le plus commun est horizontal, enjambant le haut du site. Vous pouvez faire votre liste à puces horizontale en définissant les éléments de liste à "float: left" comme ça:

  li {

  float: left;

  }

Liens de navigation

• Donner chaque lien un type d`affichage de "bloque" est la meilleure façon de rendre votre barre de navigation facile à utiliser. Sans pour autant "bloc de visualisation", Vous ne pouvez pas ajouter de rembourrage pour les liens qui ajoutent l`espace cliquable autour de leur texte. Le rembourrage rend également la barre de navigation item soulignant plus facile. Ceci est un exemple de code CSS pour les liens dans une barre de navigation:

  li a {

  bloc de visualisation;

  padding: 10px;

  background-color: # 555555;

  couleur: #ffffff;

  text-decoration: none;

  }

  li a: hover {

  background-color: # 333333;

  }

  Le code précédent ajoute 10 pixels de remplissage autour de chaque lien. Les liens obtiennent une couleur de fond de gris moyen et une couleur de texte de blanc. "Text-decoration: none" désactive le lien soulignement. le "li a: hover" Les règles de style de sélection font en sorte lorsque l`utilisateur passe un pointeur de la souris sur un lien, son arrière-plan devient un gris plus foncé.

Styling la barre elle-même

• Vous pouvez donner à votre barre de navigation tout style que vous voulez, avec des fonds, des dégradés, les ombres portées et des coins arrondis. Assurez-vous que votre style fonctionne dans tous les navigateurs, sauf si elle est d`accord sur le projet particulier pour permettre à la barre de dégrader gracieusement. Par exemple, voici le code pour un bar avec un fond noir et des coins arrondis:

  ul {

  background: # 000000;

  border-radius: 20px;

  }

  le "border-radius" la propriété ne fonctionne pas dans Internet Explorer 8 et ci-dessous, sans l`utilisation d`un polyfill tels que "CSS3Pie." Une feuille de style séparée enveloppé dans des commentaires conditionnels, ainsi que des images d`angle, peut créer un repli pour le coin arrondi aussi bien.