Faire son site et le publier

Kompozer et CSS

Faire un Menu graphique réactif : images coulissantes

Exemple 1

Nous voulons faire un menu avec des boutons ayant une image d'arrière plan qui change au survol de la souris


Menu graphique réactif au survol

image coulissanteAvec notre logiciel de traitement d'images nous fabriquons une image double avec 

Cette image va coulisser d'un côté à l'autre suivant l'état du lien.
Dans la Cascades nous demandons une position de l'image d'arrière plan pour :

Le lien à l'état normal : position haut et gauche

    #menuHfloatCoulis li a {    
padding: 4px 0;
background: #8db1cc url(images/Coulis.jpg) no-repeat scroll left top;    
display: block;    
font-family: Trebuchet MS;     font-size: 1em;     line-height: 1em;     text-align: center;     color: #03459e;    
text-decoration: none;
}

Le lien à l'état survolé et actif : position haut et droite

    #menuHfloatCoulis li a:hover, #menuHfloatCoulis li a:focus, #menuHfloatCoulis li a:active {    
background-image: url(images/Coulis.jpg); background-position: right top; background-repeat: no-repeat; 
background-color: #b9adeb;    
color: white;   
 text-decoration: underline;    
}

Voir le fonctionnement de ce menu graphique réactif
Voir le tuto d'Alsacreactions : Créer des menus simples en CSS


Exemple 2  

Menu graphique réactif inclus dans le bandeau d'en-tête


menu inclus dans le bandeau

Cette technique fait appel à un logiciel de traitement d'image permettant de faire des tranches dans l'image du bandeau

tranches dans l'image du bandeau

Image coulissante de l'item Alaric       image coulissante
Voir le fonctionnement de ce menu graphique réactif inclus dans le bandeau d'en-tête
Chaque item du menu reçoit une classe spécifiant son image coulissante d'arrière plan et au survol de la souris l'image se déplace de 100 pixels vers la gauche.

le code CSS

#menu ul {
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
  padding-left: 0;
  width: 610px;
  margin-left: 150px;
}
#menu li {
  float: left;
  list-style-type: none;
}
#menu li a {
  display: block;
  color: #990000;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: bold;
  width: 100px;
  height: 30px;
}
#menu li a:hover {
  background-position: -100px 0;
  color: #e40000;
}
.accueil {
  background-image: url(images/commun/accueilCoulis.jpg);
  background-repeat: no-repeat;
}
.montoulie {
  background-image: url(images/commun/montoulieCoulis.jpg);
  background-repeat: no-repeat;
}
.madeloc {
  background-image: url(images/commun/madelocCoulis.jpg);
  background-repeat: no-repeat;
}
.alaric {
  background-image: url(images/commun/alaricCoulis.jpg);
  background-repeat: no-repeat;
}
.bugarach {
  background-image: url(images/commun/bugarachCoulis.jpg);
  background-repeat: no-repeat;
}
h1 {
  text-align: center;
  color: #880000;
  margin-top: 0px;
  padding-top: 10px;
}

le code html

    <div id="EnTete">
      <h1>
        Sorties botaniques dans&nbsp;les P.O. et environs
      </h1>
      <div id="menu">
      <ul>
        <li>
          <a class="accueil" href="index.html">Accueil</a>
        </li>
        <li>
          <a class="montoulie" href="Montoulie.html">Montoulié</a>
        </li>
        <li>
          <a class="madeloc" href="Madeloc.html">Madeloc</a>
        </li>
        <li>
          <a class="alaric" href="Alaric.html">Alaric</a>
        </li>
        <li>
          <a class="bugarach" href="Bugarach.html">Bugarach</a>
        </li>
      </ul>
         </div>  
    </div>

En résumé :

Haut de page
Jos Argaud - Mise à jour 19/03/2009  Pour m'écrire  Document made with KompoZer