Lundi 26 mars 2007

Menu déroulant simple en javascript/CSS (suckerfish)

Vous avez été nombreux à lire et commenter l'article Menu déroulant en CSS sans javascript, compatible IE et FF tout niveau.

Cette solution que j'avais proposé en novembre 2005, était une bidouille pour que les utilisateurs d'overblog n'ayant pas accès au javascript puissent avoir un menu déroulant. Comme indiqué dans l'article en question, cette bidouille n'est pas conforme aux standards, n'est pas intelligente car redondante et est assez omplexe à mettre en place, d'où le nombre de commentaire :)

Avec l'apparition d'Internet Explorer 7 qui prend en compte la pseudo-classe hover sur les éléments autres que les liens, ce menu peut selon les configurations être complètement ACP.

Déjà à l'époque - que le temps passe vite - je préconisais l'utilisation du javascript et je donnais comme référence le menu suckerfish expliqué en détail sur htmldog.

Voici aujourd'hui le "comment faut faire" à la sauce PêUR pour installer ce menu.

 

Préambule

Pour les habitués de ma petite boutique, c'est le menu que j'utilisais pour ma V4.0 dont vous pouvez voir la demonstration ici. Notez que dans cet article, c'est la version «simple» que j'explique, la version «multi-niveau» que j'utilisais dans la v4.0 sera expliqué la semaine prochaine :)

Pour installer ce menu sur votre blog/site, il vous faudra insérer un bout de code javascript, un bout de code HTML et un bout de code CSS.

 

Etape 1: le Javascript

Le code suivant est à insérer entre les balises <head> et </head> de votre blog/site. Si vous n'avez pas accès à ces balises (votre blog est hebergé par Overblog par exemple), vous pouvez le mettre en mode source dans votre entête:

Javascript

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
      this.className=this.className.replace(new RegExp(" sfhover\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Ce code, basé sur un article d'ALA, permet grosso-modo d'effectuer en javascript l'effet de la pseudo-classe CSS :hover sur les éléments li. En d'autres termes, c'est lui qui va permettre le "déroulement" du menu.

 

Etape 2: le code HTML

Le code ci-dessous est à insérer en mode HTML dans le flux de votre document à l'endroit où vous souhaitez voir apparaitre votre menu:

HTML

<div id="container">
   <ul id="nav">
      <li><a href="#">Menu 1</a>
         <ul>
            <li><a href="#nogo">Sous-menu 1.1</a></li>
            <li><a href="#nogo">Sous-menu 1.2</a></li>
            <li><a href="#nogo">Sous-menu 1.3</a></li>
            <li><a href="#nogo">Sous-menu 1.4</a></li>
         </ul>
      </li>
      <li><a href="#">Menu 2</a>
         <ul>
            <li><a href="#nogo">Sous-menu 2.1</a></li>

            <li><a href="#nogo">Sous-menu 2.2</a></li>
            <li><a href="#nogo">Sous-menu 2.3</a></li>
            <li><a href="#nogo">Sous-menu 2.4</a></li>
         </ul>
      </li>
      <li><a href="#">Menu 3</a>
         <ul>
            <li><a href="#nogo">Sous-menu 3.1</a></li>
            <li><a href="#nogo">Sous-menu 3.2</a></li>
            <li><a href="#nogo">Sous-menu 3.3</a></li>
            <li><a href="#nogo">Sous-menu 3.4</a></li>
         </ul>
      </li>
   </ul>
</div>

Comme vous vous en doutez, il faut remplacer les #nogo par les URLs des pages vers lesquelles vous souhaitez que soient redirigés vos lecteurs.

Les "menu x" et "sous-menu x.n" doivent être remplacés par le texte significatif que vous souhaitez voir dans le menu.

Si vous décidez de modifier l'id ("nav" dans notre exemple) de l'élément ul, veillez à le modifier aussi dans le javascript (je l'ai mis en valeur en gras) et bien entendu dans la CSS.

Notez que j'ai englobé le menu par une div identifiée "container" qui pourra être utile à certains d'entre vous en cas de positionnement absolu de ce menu.

 

Etape 3: le code de la CSS

Ci-dessous, le code à mettre dans votre CSS:

CSS

#container {
}

#nav, #nav ul {
   padding: 0;
   margin: 0;
   list-style: none;
}

#nav a {
   display: block;
   width: 10em;
}

#nav li {
   float: left;
   width: 10em;
}

#nav li ul {
   position: absolute;
   width: 10em;
   left: -999em;
}

#nav li:hover ul {
   left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
}

Ce code ne constitue que la base à insérer dans votre CSS pour que que le menu fonctionne.

A vous d'ajouter les propriétés qui permettront d'accorder le style de votre menu à votre blog. Pour cela vous avez toute la panoplie des propriétés CSS (font, background, color, etc). Vous trouverez dans les articles Vos premiers pas en CSS et Typographie et CSS des informations qui vous aideront à "styler" ce menu.

A titre d'exemple je vous renvoie sur la très belle mise en situation faite par htmldog. Je vous propose aussi ce petit exemple sur lequel vous pouvez télécharger le css associé... comme ça vous pouvez vous faire une idée des modifications à apporter.

 

A bientôt

Bon, et bien voilà! Si vous avez des questions, ben, comme d'hab, un petit commentaire et j'essaie de répondre rapidement.

La semaine prochaine, ça se corse, la même chose mais multi-niveaux.

 

Bon blogging.

 

- Voir les commentaires - Publié dans : Webdev
Retour à l'accueil
Contact - C.G.U. - Rémunération en droits d'auteur - Signaler un abus