Faire son site et le publier

Kompozer et CSS

Faire un Menu vertical réagissant au survol de la souris

Nous voulons un menu vertical stylé et réagissant au survol de la souris.
Dans Kompozer nous créons, dans la div menu, notre liste à puces et les liens correspondants à chaque item. Voici le code html :      

      <ul>
        <li><a href="index.html">Pascal accueil</a></li>
        <li><a href="menuDyn.html">Menu réactif</a></li>
        <li><a href="inserer_images2.html">Insérer images</a></li>
        <li><a href="class_texte.html">class pour texte</a></li>
      </ul> 

Pour rendre ce menu réactif au survol de la souris, nous utiliserons la pseudo classe a:hover
Dans Cascades : Nouvelle règle de style / style appliqué à l'élément portant  l'idMenu vertical réactif

#menu : largeur 180px, flottant à droite avec une marge gauche de 10px pour éloigner le texte du div texte et un padding de 10px  de tous côtés pour éloigner le texte intérieur des bords.

Arrière-plan couleur orange, image d'arrière-plan le logo KompozerTerre placé en haut à droite et qui ne se répète pas

Pour donner un peu de relief nous demandons une bordure gris foncé à droite et en bas

Pour appliquer un style aux seuls éléments du menu : "Nouvelle règle de style appliqué à l'élément portant l'id"

#menu a : Les liens du menu seront écrits en blanc et ils ne seront pas soulignés

#menu li : La liste à puces du menu n'aura pas de puces : list-style-type: none;

#menu a:hover : Les liens survolés du menu seront de couleur rouge

#menu li a:hover : Les éléments survolés de la liste à puces du menu auront un arrière-plan blanc, une bordure gauche rouge et un padding gauche de 5px pour éloigner le texte de la bordure 

Visionner le fonctionnement du menu sur Internet

Code du menu dans la feuille de style

/* Generated by KompoZer */
#menu {

  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  padding: 10px;
  float: right;
  width: 180px;
  margin-left: 10px;
  background-color: #ff9900;
  background-position: right top;
  background-repeat: no-repeat;
  background-image: url(images/terrekpZ1goldrorange60.png);
}
#menu li {
  list-style-type: none;
#menu a {
  color: white;
  text-decoration: none;
}
#menu a:hover {
  color: #cc0000;
}
#menu li a:hover {
  border-left: 5px solid #cc0000;
  background-color: white;
  padding-left: 5px;
}
Haut de page
Jos Argaud - Mise à jour 16/12/2008  Pour m'écrire  Document made with KompoZer