Faire son site et le publier

Kompozer et CSS

Faire un Menu horizontal réactif avec CSS

1 - Menu horizontalMenu original de l'exercice

Exercice :
Ouvrir dans notre navigateur la page  menu.html (cliquer sur ce lien)

Pour enregistrer ce fichier dans notre dossier d'exercices, différentes procédures sont possibles :
dans le navigateur Fichier / Enregistrer sous  ou bien dans Kompozer Fichier / Ouvrir une page Web et coller le lien copié dans la barre d'adresses du navigateur.
Dans les 2 cas Parcourir pour l'enregistrer dans notre dossier d'exercices et l'ouvrir dans Kompozer.
Cette page se présente avec une première liste à puces composant le menu et une deuxième liste à puces qui se trouve dans le corps de la page.
Avec Cascades nous allons transformer cette présentation. 

Nous voulons, pour la liste du menu, une présentation horizontale avec les liens dans des boutons. Il faut agir sur les balises de type :

ul  Dans l'onglet Boite (Supprimer l'espacement à gauche)
li   Dans les onglets Texte (alignement :centré) Bordure (1 px, solid, red), Boite (flotte à gauche, largeur 100 pixels, marges gauche et droite 5 px), Liste (pas de puces) : 

 Nous constatons que les styles s'appliquent à toutes les listes de la page. Il faut identifier la liste du menu pour que les styles ne s'appliquent qu'à elle. La liste de courses, située dans le corps de la page, doit rester verticale et avec des puces.

Modifier les sélecteurs  Attribut id Valeur menu pour <UL>

Pour que les styles définis ne s'appliquent qu'au menu nous allons modifier les sélecteurs ul et li.

  1. Sélectionner dans la barre d'état le bloc ul correspondant à la liste du menu
    Clic droit / Propriétés avancées / Attribut id / Valeur menu
  2. Ouvrir Cascades / Double clic sur ul permet d'ouvrir une boite de dialogue pour modifier le sélecteur.  Remplacer ul par #menu ul
  3. OK et fermer Cascades
  4. Faire la même chose pour li

Dans la feuille de style nous voyons que les styles s'appliquent à la liste du menu.

Remplacer le sélecteur li par #menu li

 La syntaxe générale dans la feuille de style est  :
#parent descendant {directives de styles}Toutes les listes sont horizontales avec des boutons

Dans notre cas la liste du menu (donc les balises ul et li du menu) est l'enfant de menu. Donc, après le dièse, nous voyons d'abord écrit menu, suivi d'un espace, suivi de li, suivi des directives de style entre accolades.

#menu li {
  border: 1px solid red;
  list-style-type: none;
  float: left;
  width: 100px;
  margin-right: 5px;
  margin-left: 5px;
  text-align: center;
}
#menu ul {
  padding-left: 0px;
}
seule la liste du menu est horizontale

Nous pouvons vérifier dans Kompozer que la liste du corps de page "Liste de courses" est redevenue verticale avec les puces.

Attention :
Pour créer l'espace nécessaire aux puces d'une liste <ul>, les navigateurs n'ont pas tous adopté la même méthode :

Quand on modifie uniquement soit le margin, soit le padding d'un <ul> on se retrouve donc avec un résultat différent selon les navigateurs.
Il faut donc toujours spécifier à la fois les valeurs de margin et de padding pour les éléments <ul> en mettant l'un à zéro.

padding-left avec navigateurs Gecko                margin-left avec navigateurs IE et Opéra

Comment gérer le décalage de l'espace gauche d'une liste, différent sous IE et sous Firefox : cliquer sur ce lien d'Alsacreations.

2 - Menu réactif

Lorsqu'un lien est cliqué, tout se passe comme si une nouvelle "classe" était attribuée à la balise <a> du lien.
Cette nouvelle "classe" serait responsable de sa couleur après le clic.
Cette classe n'existe pas vraiment.
C'est la raison pour laquelle on parle de "pseudo-classe".
La couleur attribuée au contenu des balises <a> est donc susceptible d'être modifiée en fonction du comportement de l'utilisateur.
L'ordre des pseudo-classes dans la feuille de style est important.

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
Etat du lien Sélecteur CSS Couleur par défaut dans un navigateur
Vers une page non visitée a :link Bleu et souligné
Vers une page déjà visitée a :visited Violet et souligné
Lien survolé a :hover
Lien cliqué a :active
Modifier la pseudo-classe « visited »modification de la pseudo-classe "visited"
Règle de style personnalisée                   Règle de style personnalisée
la pseudo-classe ne s'applique qu'aux liens du menu
Transformer les liens du menu en vrais boutons
règle de style personnalisée pour le sélecteur #menu a
Pour avoir de vrais boutons : Onglet Boîte Affichage Bloc

les liens du menu sont transformés en vrais boutons
Modifier la pseudo-classe « hover » pour avoir des boutons réagissant au survol de la souris

La pseudo-classe visited permet de traiter un événement qui a eu lieu dans le navigateur. Tout se passe comme si l'on ajoutait une classe à l'élément visé.

La pseudo-classe hover permet de traiter un événement qui peut se dérouler dans le navigateur: le passage de la souris au-dessus d'un élément du texte.

Avec Cascades établir une nouvelle "règle de style personnalisée" (pour le sélecteur #menu a :hover)
Couleur des caractères bleu, fond rose

Le tableau ci-dessous permet de nous familiariser avec à gauche le code CSS et à droite le code HTML

#menu ul {
    padding-left: 0;
    }
    #menu li {
    border: 1px solid #cc0000;
    text-align: center;
    float: left;
    width: 100px;
    margin-right: 5px;
    margin-left: 5px;
    list-style-type: none;
    }
    #menu a:visited {
    color: #99ff99;
    font-weight: bold;
    text-decoration: none;
    }
    #menu a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    background-color: #663333;
    display: block;
    }
    #menu a:hover {
    color: #000099;
    background-color: #ffcccc;
    }
  <body>
    <h3>
      Mon menu
    </h3>
    <ul id="menu">
      <li>
        <a target="_blank" href="http://www.geckozone.org/forum/viewforum.php?f=20">Item 1</a>
      </li>
      <li>
        <a target="_blank" href="http://www.orange.fr/">Item 2</a>
      </li>
      <li>
        <a target="_blank" href="http://doc.ubuntu-fr.org/tutoriel">Item 3</a>
      </li>
    </ul>
    <h4 style="clear: both;">
      Liste de courses
    </h4>
    <ul>
      <li>Une salade
      </li>
      <li>Du mou pour le <a target="_blank" href="http://fr.wikipedia.org/wiki/Chat_domestique">chat</a>
      </li>
      <li>Le journal
      </li>
    </ul>
  </body>

Boutons dynamiques avec la pseudo-classe hover

Récapitulation : 

Sauvegarder, visionner dans un navigateur.
A force de tester, les liens finiront tous par être visités. Pour les réafficher dans l'état non visités, il faut effacer l'historique dans notre navigateur. Dans Firefox la Web Developer Tolbar simplifie la procédure : le menu Divers propose  le sous-menu Liens visités / Marquer tolus les liens comme non visités.

Tuto pour réaliser un menu simple horizontal réactif

Haut de page
Jos Argaud - Mise à jour 31/01/2010  Pour m'écrire  Document made with KompoZer  D'après le cours d'Yves Mairesse et avec son consentement