Menu de navigation léger en CSS (1)

Publié le par PêUR

Mise à jour le 21/01/2006 22:06

Avec la correction du calcul du blogRank de la version 1.88 (août 2005), vous avez été nombreux à vous plaindre de la limitation à 300Ko pour l'affichage d'une page de votre blog.

J'ai constaté en regardant certains blogs que nombreux utilisent des images lourdes avec effet rollover.

Cet article a pour but de vous montrer des exemples de menus dynamiques sans image afin, d'une part, d'alléger vos blogs et, d'autre part, de vous faire découvrir les possibiltés illimitées du CSS

Exemple 1 (Vertical)

Voici un menu vertical qui peut être intégré dans un module "texte libre" ou bien à côté d'une banière via un tableau:

 

Le pavé CSS est à intégrer dans votre CSS, le pavé HTML est à intégrer dans le code source de votre entête, pied de page, module "texte libre", message d'accueil ou article

CSS

#menu a {
  text-decoration:none;
  text-align:center;
  background-color:#BCCCD2;
  color:#FFFFFF;
  display:block;
  width:8em;
  padding:0.2em;
  margin:0.5em 0;
  border-right:5px solid #FFFFFF;
  }
#menu a:hover {
  border-right:5px solid #CC3333;
  }

 

HTML

<div id="menu">
  <a href="URL_de_votre_lien">Item 1</a>
  <a href="URL_de_votre_lien">Item 2</a>
  <a href="URL_de_votre_lien">Item 3</a>
  <a href="URL_de_votre_lien">Item 4</a>
  <a href="URL_de_votre_lien">Item 5</a>
</div>

Bien sûr, vous pouvez accordez couleurs et formes à celles de votre blog, pour modifier:

  • La couleur de fond du bouton, modifiez: l'attribut: background-color:#BCCCD2;
  • La couleur de la police, modifiez: color:#FFFFFF;
  • La largeur des boutons, modifiez: width:8em;
  • La largeur de la bande à droite au passage de la souris, modifiez: border-right:5px ... dans ce cas modifiez de la même manière les 2 lignes #menu a et #menu a:hover
  • La couleur de la bande à droite au passage de la souris, modifiez: border-right:...  #CC3333;

ATTENTION: l'attribut border-right:5px solid #FFFFFF; de la ligne #menu a doit avoir pour couleur, la couleur de votre fond de blog.

Quelques possibilités de couleurs:

     

   

     

     

     

En manque d'inspiration? Allez faire un tour chez ColourLovers 

 

Exemple 2 (Horizontal)

Voici un menu horizontal qui peut être intégré sous une bannière dans l'entête de votre blog:

ATTENTION: si vous avez un modèle de blog inférieur au modèle 5, sous Internet Explorer, les onglets apparaissent hachurés.

Le pavé CSS est à intégrer dans votre CSS, le pavé HTML est à intégrer dans le code source de votre entête, pied de page, module "texte libre", message d'accueil ou article

CSS

#navigation {
  background:transparent;
  margin:0em;
  height:4em;
/* cache overflow:hidden de IE5/Mac */
/* */
  overflow: hidden;
/* */
  }
#navigation ul {
  margin:0;
  padding:0;
  list-style-type:none;
  background:transparent;
  }
#navigation li {
  display:block;
  float:left;
  margin:0px 2px 0px 0px;
  }
.BoxOnglet, .BoxOngletFonce {
  background:transparent;
  }
.BoxOnglet span {
  text-align:center;
  color:#FFFFFF;
  margin:0;
  font-family:verdana;
  font-size:xx-small;
  font-weight:normal;
  }
.BoxOngletFonce span {
  text-align:center;
  color:gray;
  margin:0;
  font-family:verdana;
  font-size:xx-small;
  font-weight:normal;
  }

.b1, .b2, .b3, .b4 {
  display:block;
  font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */
/* */
  overflow: hidden;
/* */
  }

.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {
  border-left:1px solid #FFFFFF;
  border-right:1px solid #FFFFFF;
  }
.b1 {margin:0 5px; background:#FFFFFF;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.BoxContenu {
  display:block;
  border-left:1px solid #FFFFFF;
  border-right:1px solid #FFFFFF;
  }

a.menu {
  display:block;
  text-decoration:none;
  width:6.5em;
  }
a.menugrand {
  display:block;
  text-decoration:none;
  width:9.5em;
  }
a.menu:hover, a.menugrand:hover  {
  background:transparent;
  cursor:pointer;
  }
a.menu:hover span, a.menugrand:hover span {
  padding-top:10px;
  }

.rouge {background:#cc3333;}
.grisbleu {background:#CAD8DE;}
.jaune {background:yellow;}

 

HTML

<DIV id=navigation>
<UL>
  <LI><A class=menu href="URL_de_votre_lien">
    <B class=BoxOnglet>
      <SPAN class="BoxContenu rouge">Lien 1
      </SPAN>
    <B class="b4 rouge"></B>
    <B class="b3 rouge"></B>
    <B class="b2 rouge"></B>
    <B class=b1></B></B></A>
  <LI><A class=menugrand href=href="URL_de_votre_lien">
    <B class=BoxOnglet>
      <SPAN class="BoxContenu rouge">Lien 2
      </SPAN>
    <B class="b4 rouge"></B>
    <B class="b3 rouge"></B>
    <B class="b2 rouge"></B>
    <B class=b1></B></B></A>
  <LI><A class=menu href=href="URL_de_votre_lien">
    <B class=BoxOngletFonce>
      <SPAN class="BoxContenu jaune">Lien 3
      </SPAN>
    <B class="b4 jaune"></B>
    <B class="b3 jaune"></B>
    <B class="b2 jaune"></B>
    <B class=b1></B></B></A>
  <LI><A class=menu href="href="URL_de_votre_lien">
    <B class=BoxOnglet>
      <SPAN class="BoxContenu grisbleu">Lien 4
      </SPAN>
    <B class="b4 grisbleu"></B>
    <B class="b3 grisbleu"></B>
    <B class="b2 grisbleu"></B>
    <B class=b1></B></B></A>
</UL>
</DIV>
 

Bien sûr accordez couleurs et formes à celles de votre blog, pour modifier:

  • La couleur de fond des onglets, créez une classe de couleur comme  .rouge, .jaune et .grisbleu (tout en bas du CSS) en la nommant à votre convenance. Pensez à changer le code couleur de l'attribut background-color:#code_couleur; en conséquence. Il suffit ensuite dans le code HTML d'appeller 4 fois cette classe entre les balises <li> et </li>. Pour plus de clarté, j'ai mis en gras l'appel de ces classes de couleur  dans le  CSS et le code HTML
  • La couleur de la police, modifiez l'attribut color:#FFFFFF; et color;gray; respectivement des classes .boxOnglet et .boxOngletFonce. Ces 2 classes permettent d'avoir 2 couleurs de police, une claire pour les onglets foncés et une foncée pour les onglets clairs. Il suffit ensuite dans le code HTML d'appeller la bonne classe selon que pour l'onglet on veut une couleur de police claire ou foncée. Pour plus de clarté, j'ai mis en gras l'appel de ces classes de couleur de police dans le  CSS et le code HTML.
  • La largeur des onglets, modifiez les attributs width:6.5em; et  width:9.5em; respectivement des classes a.menu et a.menugrand afin de bénéficier de 2 largeurs d'onglet. Il suffit ensuite dans le code HTML d'appeller la classe adéquate dans la balises <a...> afin d'avoir un onglet large ou court selon que cet onglet possède un libellé long ou pas. Pour plus de clarté, j'ai mis en gras l'appel de ces classes de longueur dans le  CSS et le code HTML.

Précisions

  • J'ai rapidement fait cet article. Certaines explications peuvent être peu claires, dans ce cas laissez moi un commentaire j'y répondrai le plus rapidement possible.
  • Si en essayant d'intégrer un de ces menus à votre blogs vous avez des soucis de couleur taille de police pour les faire coïncider à votre blogs, même chose que précédement, laissez moi un commentaire.
  • D'autre menus viendront au fils des semaines des plus simples, des plus compliqués...

Ils, elles utilisent un de ces modèles...

 

Publié dans CSS

Commenter cet article

Kate 21/04/2007 11:52

excuse-moi je ne t'ai pas remercié pour ton aide prévisible - à bientôt

PêUR 22/04/2007 09:17

;)

Kate 21/04/2007 11:50

bonjour je viens de passer en V2 et mes petits menus dans le module gauche ont "disparu", il reste le lien mais plus le design comment le rétablir

PêUR 22/04/2007 09:17

Tu as initialisé ton css, le css de ton menu n'est plus présent, il faut le rajouter ;)

Pierre paul 16/04/2007 20:40

Oui , pardon ,c 'est ce que je voulais dire.
J'utilise bien le point et sa marche parfaitement sous firefox, mais pas sous IE!

PêUR 16/04/2007 21:22

Tu peux me donner un exemple pour que je regarde. Attention parfois une erreur dans le css empêche, comme je te le disais plus tôt, d'interpréter la suite du CSS... et parfois une erreur ne gène pas Firefox mais seulement IE... tu vois où je veux en venir ;)

Pierre paul 15/04/2007 22:31

salut,
j'utilise ces boutons, très pratiques sur mon site. Sous FF, c'est nickel, mais sous IE 7 sa bug (c'est un pléonasme, je sais).
Enfait, j'ai l'impression que IE ne prend pas en compte la virgule pour la taille des boutons en em.
Ton jugement?
merci

PêUR 15/04/2007 23:41

C'est un point et pas une virgule qui permet de passer des valeurs fractionnaires en em. ;)

Olive 28/02/2007 18:59

Hello Peur

Comme d'habitude, toujours au top pour tes créations !
Je viens d'installer sur cette page test l'un de tes menus simples : http://www.leim.fr/Menu.html
Une question cependant dont je n'arrive pas à trouver la réponse dans ces commentaires : comment définir la largeur des boutons (cad pour qu'ils soient tous de la meme largeur) ?

Merci !
Olivier

PêUR 03/03/2007 13:35

Ta page n'existe plus!!!En fait avec ce menu, la largeur des bouton est proportionnelle à la taille du texte.