NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Les menus avec/sans puces

Les menus avec/sans puces


Un petit point sur le formatage des listes à puces en CSS.



Faire un menu graphique sans listes à puces



Que votre menu soit horizontal ou vertical, le principe sera a quelque chose près le même. Il est donc vital pour vous de bien suivre cette première partie afin de mieux connaître le terrain par la suite. ;)

Pour faire un menu graphique, on va se servir de la technique du rollover. Si vous n'avez pas tout compris, je vous conseille de relire ce tutoriel. ;)
Si vous avez bien suivi, nous devons faire un bloc par lien pour l'effet de survol. On mettra donc en place des balises liens avec une class "rollover" pour les transformer en block et changer les images de fond rapidement.

J'en dis trop, on passe à la pratique!

XHTML :

<div id="menu"> /* Le menu tiendra en un bloc */

  <a href="#" title="Rubrique1" class="rollover">Rubrique 1</a>
  <a href="#" title="Rubrique1" class="rollover">Rubrique 2</a>
  <a href="#" title="Rubrique1" class="rollover">Rubrique 3</a>
  <a href="#" title="Rubrique1" class="rollover">Rubrique 4</a>
  <a href="#" title="Rubrique1" class="rollover">Rubrique 5</a>

</div>


C'était dur hein? :p

Continuons sur notre lancée, je vous sens chaud (comment ça non? :p)

CSS :

/* Le rollover */
a.rollover {
     display: block; /* On transforme notre balise lien inline en block */
     height: 65px;
     width: 271px;
     background-image: url('styles/images/citron.png'); /* Remarque : l'url de l'image peut changer selon vos dossiers ;) */
     background-repeat: no-repeat;
}

a.rollover:hover { /* Lors du survol des liens contenant la class 'rollover' */
     background-position: 0% -66px; /* On change la position du fond lors du survol */
}

/* Le bloc menu */
div#menu {
     height: 100%; /* Je mets ici une valeur au hasard, n'hésitez pas à l'adaptez selon vos besoins */
     width: 100px; /* Pareil que pour la hauteur */
     float: left;  /* Vous pouvez aussi mettre "right" si cela vous chante */
}

/* Le formatage de texte des liens */
#menu a {
        font-family: "Trebuchet MS", Verdana, Serif;
        text-decoration: none;
}

#menu a:hover {
        text-decoration: underline;
}


Et voilà! Vous avez un beau menu graphique! Si vous n'avez pas compris malgré mon code commenté, je vous conseille de faire des essais. C'est à dire de copier/coller mon code et de supprimer des lignes pour voir les conséquences sur votre page. C'est en faisant des essais et encore des essais que vous apprendrez le plus vite!

Si vous voulez faire le même menu en horizontal, il faudra attribuer un flottant (droit ou gauche) à vos liens contenant la class image, rien de plus facile pour les maîtres du CSS que vous êtes devenus! :p

Faire un menu classique avec des listes à puces



Vous venez de créer votre site et vous préférez lui donner un aspect "classe"? Vous en avez de la chance, c'est ce que vous allez apprendre à faire au cours de cette partie. ;)
En effet, jusqu'ici j'ai fait le bonheur (enfin j'espère) des personnes ayant un site assez attractif sans trop me soucier des autres. Si vous avez un site sur l'informatique, des cours en ligne, de la programmation etc. il est préférable de faire un design propre, à la limite du classique avec une pointe d'originalité. Ce que je veux vous faire comprendre, c'est que vous n'allez pas apprendre a faire un menu qui clignote de partout avec des effets de fou mais quelque chose de plutôt sobre.

Vous ne voyez pas du tout de quoi je veux parler ? Et bien vous avez un exemple sous les yeux! :D En effet, comme vous l'avez certainement remarqué, le menu de noshade.net est par exemple assez sobre. ;)

Pour faire un menu avec des sites à puces, il vous faut un bloc div qui englobera la liste et bien sûr la liste avec les liens. Vous êtes prêts? Au boulot!

XHTML :

<div id="menu">
  <ul> <!-- la fameuse liste ;) -->
    <li><a href="#" title="lien 1">Lien 1</a></li>
    <li><a href="#" title="lien 2">Lien 2</a></li>
    <li><a href="#" title="lien 3">Lien 3</a></li>
    <li><a href="#" title="lien 4">Lien 4</a></li>
    <li><a href="#" title="lien 5">Lien 5</a></li>
  </ul>
</div>


Avouez que c'était pas bien sorcier! ;)

Avant de vous laisser quartier libre sur le CSS, je tiens à vous préciser que ce n'est pas parce qu'on faut quelque chose de différent que votre imagination en soit bridée. En effet, lachez-vous, les possibilités sont grandes malgré la discretion du menu :) vous pouvez mettre du souligné au survol, ne pas en mettre, mettre une bordure à vos liens, les faire changer de couleur, de place!

Allez vous pouvez y aller, voici le code (réfléchissez avant de le regarder quand même, ca me ferait grandement plaisir que vous sachiez le faire de vous-même!) :

CSS :

div#menu {
     height: 100%;
     width: 100px;
     float: left;
}

div#menu li { /* On définit les propriétés des listes se trouvant dans le bloc menu */
     list-style-type: url('images/puce1.gif');
}

div#menu li a { /* Les liens se trouvant dans le bloc menu se trouvant dans des listes seront alors affectés par les propriétés */
     text-decoration: none;
     color: #23731d;
}

div#menu li a:hover { /* Les liens survolés se trouvant dans le bloc menu se trouvant dans des listes seront alors affectés par les propriétés */
     list-style-type: url('images/puce2.gif');
     text-decoration: underline;
     color: #27912a;
}


Vous êtes théoriquement capables de comprendre et reproduire ce code.
Cependant, j'y ai introduit une petite propriété de listes à puces : le changement de puces.
En effet, si vous survolez un lien du menu, la puce le précédant changera.

On peut ainsi obtenir des effets très sympa avec un peu de technique et beaucoup d'imagination! :)
Le 06/03/2006 par Vinchz

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

Ajouter un commentaire sur ce tutoriel

CSS, Menu, Puces
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)