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

Publié le par PêUR

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.

 

Publié dans Webdev

Commenter cet article

kiptenui 28/09/2007 01:34

Est-il possible d'ouvrir le menu a partir d'un click et non en passant la souris sur le menu ?

iiiiiiii 11/03/2015 01:57

uuuuuuuu

Djac Baweur 30/07/2007 20:16

En fait, j'ai trouvé une solution en bidouillant, avec un z-index à 2 pour .ln (à 1, ça marche pas, je comprends pas pourquoi), et avec position:static pour #container.
Sous FF ça a l'air de marcher, mais avec Safari, ça laisse "des traces" une fois que le souris quitte le menu : en fait, il manque un bout à droite du menu déroulant, qui s'affiche une fois la souris dessus, mais qui persiste ensuite à s'afficher une fois la souris partie. Il suffit de faire défiler le blog pour que ces traces résiduelles disparaissent.
Une idée ??
;o)

Djac Baweur 30/07/2007 14:14

Bonjour, PêUR
j'essaie d'installer ce menu déroulant sur mon blog, mais pas moyen que le menu s'affiche par-dessus le reste du blog (en restant installé en bas de l'en-tête), malgré le z-index.
Aurais-tu une idée ?
Merci d'avance ! :o)

modjokid :0091: 22/05/2007 21:52

oki mais c'est quoi le moo.fx ?

PêUR 22/05/2007 22:18

moo.fx

Aude 20/05/2007 20:50

Non je ne suis pas en mode privilège , je suis en mode confiance.

PêUR 20/05/2007 22:21

C'est pour ça... javascript interdit en confiance!