Menu déroulant en CSS sans javascript avec htc, compatible IE et FF (2)

Publié le par PêUR

Je cherche depuis quelques temps une solution pour créer un menu déroulant sans javascript, compatible Internet Explorer et Firefox (bien entendu, c'est avec Internet Explorer que ça se complique).

Pourquoi sans javascript? Ben tout simplement car sur Over-Blog, la plateforme qui héberge ce blog, les blogueurs en mode confiance (mode par défaut à l'ouverture d'un blog) n'ont pas accès au javascript pour éviter de casser leur blog. Pourquoi compatible Internet Explorer et Firefox? Ben parceque  les internautes  sont équipés pour 80% d'Internet Explorer et pour 20% (ce qui n'est pas négligeable) de Firefox. (Je ne comptabilise pas les navigateurs exotiques et SAFARI. Aie! Ne me tapaient pas les Macistes... Je vous aime aussi!!!)

Avant de commencer

J'avais déjà tenté le coup dans cet article mais ce menu est très compliqué à installer, beaucoup de commentaires pour preuve, et il y a redondance du code HTML pour l'affichage sous IE et FF. Bref ce n'est pas la panacé!

Ce menu là est plus simple, il n'y a pas de redondance de code, par contre il utilise un fichier externe afin de décrire les behaviours (comportements) au format HTC, extension propriétaire d'Internet Explorer. Les 2 inconvénients de cette méthode sont:

  • d'une part elle n'est pas valide XHTML/CSS. Il faut donc l'éviter pour les sites se voulant accessible et au normes
  • d'autre part, il faut heberger un fichier HTC à la racine de son blog ou site... ce qui implique que ce menu n'est pas utilisable sur Over-Blog, toutefois, je publis quand-même cet article car je l'ai rédigé avant de tester sur over-blog (quel âne) et que c'est dommage de laisser cet article trainer dans un coin alors que j'ai 20% de visiteurs qui ne proviennent pas d'over-blog ;-)

Dernière recommandation, Si vous avez accès au javascript, préférez ce dernier ou utilisez le compromis CSS/javascript d'alsacréations  ou le menu "Suckerfish" d'HTMLDog  dont on trouve une très belle mise en situation ici . Pourquoi ce conseil? Aller lire le commentaire N°81 laissé sur cet article... je ne veux surtout pas contribuer au non respect des standards et ébranler Internet.

Dernière chose, mais cette fois, c'est vraiment la dernière, le menu ci-dessous est FORTEMENT inspiré (voir soufflé et même pompé) du site de Mickaël Guessant 

Voili voilou, passons aux choses sérieuses

 

Le menu

Voici le menu que vous allez pouvoir réaliser:

Voir le menu en situation réelle 

 

Le CSS

Ci dessous, le code à insérer dans votre CSS:

CSS

#menuhtc {color: #fff;}
#menuhtc a, #menuhtc a:visited, #menuhtc a:hover {
   text-decoration: none;
   color: #fff;
  }
#menuhtc ul { margin:0;padding:0; }
#menuhtc ul li {
   behavior:url('url_complete/menu.htc');
   background:#230;
   position:relative;
   display:inline;
   padding:3px 15px;
   cursor:pointer;
  }
#menuhtc ul>li { display:table-cell; }
#menuhtc ul li:hover { background: #ABBC47}
#menuhtc ul li ul {
   top:expression(this.parentNode.offsetHeight+"px");
   left:expression(0);
   border:solid 1px #000;
   position:absolute;
   visibility:hidden;
  }
#menuhtc ul li:hover ul { visibility:visible; z-index:200;}
#menuhtc ul li ul li { display:block;}

Quelques informations pour modifier l'aspect du menu:

  • Couleur du texte du menu primaire, modifiez color: #fff; de l'identifiant #menuhtc
  • Couleur du texte du menu secondaire, modifiez color: #fff; des éléments #menuhtc a, #menuhtc a:visited, #menuhtc a:hover
  • Couleur de fond des boutons, modifiez background:#230; des éléments #menuhtc ul li. ATTENTION, cette modification n'affecte que l'affichage du menu sous Firefox, pour impacter l'affichage sous Internet Explorer, vous devez modifiez le fichier HTC (Voir paragraphe "Le fichier externe HTC")
  • La largeur des boutons est fonction du texte qui les compose, toutefois vous pouvez augmenter ou diminuer les marges entre ce texte et les bords des boutons concernés en modifiant padding:3px 15px; des éléments #menuhtc ul li
  • Couleur de fond des boutons au passage de la souris, modifiez background:#ABBC47; des éléments #menuhtc ul li:hover. ATTENTION, cette modification n'affecte que l'affichage du menu sous Firefox, pour impacter l'affichage sous Internet Explorer, vous devez modifiez le fichier HTC (Voir paragraphe "Le fichier externe HTC")
  • Contour du menu secondaire, modifier border:solid 1px #000; des éléments #menuhtc ul li ul .

 

L'HTML

Le code HTML à insérer en mode source de votre entête est le suivant:

HTML

<div id="menuhtc">
  <ul>
      <li>Menu 1
          <ul>
              <li><a href="#">menu1.1</a></li>
              <li><a href="#">menu1.2</a></li>
              <li><a href="#">menu1.3</a></li>
              <li><a href="#">menu1.4</a></li>             
              <li><a href="#">menu1.5</a></li>
              <li><a href="#">menu1.6</a></li>
              <li><a href="#">menu1.7</a></li>
              <li><a href="#">menu1.8</a></li>
              <li><a href="#">menu1.9</a></li>
              <li><a href="#">menu1.10</a></li>                                         
          </ul>
      </li>
      <li>Menu 2
         <ul>
              <li><a href="#">menu2.1</a></li>
              <li><a href="#">menu2.2</a></li>
          </ul>
      </li>
      <li>Menu 3
         <ul>
              <li><a href="#">menu3.1</a></li>
              <li><a href="#">menu3.2</a></li>
              <li><a href="#">menu3.3</a></li>
          </ul>  
      </li>     
  </ul>
</div>

Pour que vos boutons du menu secondaire redirigent vers les pages souhaitées, remplacez les # par les URLs de ces pages

 

Le fichier externe HTC

Vous pouvez créer ce fichier avec le bloc-note (Notepad). Copiez/collez le code ci-dessous et enregistrez le fichier en le nommant menu.htc

Contenu du fichier menu.htc

<PUBLIC:COMPONENT>
   <PUBLIC:ATTACH EVENT="onmouseenter" ONEVENT="showSubMenu()" />
   <PUBLIC:ATTACH EVENT="onmouseleave"  ONEVENT="hideSubMenu()"  />

   <SCRIPT LANGUAGE="JScript">
    var menuBackground = '#230';
    var menuHighLight = '#ABBC47';

    function showSubMenu() {
      // highlight current item
      menuBackground = style.backgroundColor;
      style.backgroundColor = menuHighLight;

      // get sub menu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
      
        // workaround for windowed select object bug
        // that ignores zindex values
        var iframe = getElementsByTagName('iframe')[0];
        if (!iframe) {
          iframe = document.createElement('iframe');
          iframe.frameBorder=0;
          iframe.style.display='block';
          iframe.style.position='absolute';
          iframe.style.top=submenu.offsetTop;
          iframe.style.left=0;
          iframe.style.width=submenu.offsetWidth;
          iframe.style.height=submenu.offsetHeight;
          insertBefore(iframe, submenu);
        }
        
         // show sub menu
        submenu.style.visibility='visible';
        iframe.style.visibility='visible';
      }
    }
   
    function hideSubMenu() {
      // restore background
      style.backgroundColor = menuBackground;

      // hide submenu
      var submenu = getElementsByTagName('ul')[0];
      if (submenu) {
        submenu.style.visibility='hidden';
        getElementsByTagName('iframe')[0].style.visibility='hidden';
      }
    }

   </SCRIPT>
</PUBLIC:COMPONENT>

Il ne vous reste plus qu'à uploader ce fichier à la racine de votre blog ou site.

N'oubliez pas de récupérer l'url de ce fichier et de la placer dans votre CSS à la ligne suivante behavior:url('url_complete/menu.htc') (cette ligne est mise en gras dans le CSS pour mieux la repérer)

Vous l'avez vu au paragraphe "Le CSS", la modificaton de la couleur de fond des boutons doit être faite sur le fichier HTC pour un affichage sous Internet Explorer. Voici comment procéder:

  • Couleur de fond des boutons, modifiez #230 de la variable menuBackground.
  • Couleur de fond des boutons au passage de la souris, modifiez #ABBC47 de la variable menuHighLight.

 

Publié dans CSS

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

christophe 24/09/2007 21:57

bonjour,

je souhaite crée un sous sous menu et qu'il s'affiche à coté de son identifiant.

j'ai modifier le fichier css

top:expression(0) pour l'afficher sur la même ligne que l'identifiant

left:expression(this.parent.offsetWidth+"px") pour décaller la cellule.

le problème c'est que l'iframe reste en place . elle ne se décale pas à gauche avec la cellule.

si vous avez une idée.

merci

christophe 24/09/2007 21:48

Bonjour,

voilà, votre menu est trés bien, mais j'ai un souci.
je voudrais mettre un sous sous menu mais il faudrait qu'il s'affiche à coté de son identifiant.

pour déplacer ma fenetre j'ai remplacé:
top:expression(0); /*-- pour la meme hauteur que mon identifiant --*/
left:expression(this.parent.offsetWidth); /*-- décalage de la cellule à droite --*/

Le problème j'ai l' iframe qui reste en place, comment faire svp ?

Merci pour vos renseignements

Jeremy 09/09/2007 18:53

Menu sympa mais en v2 dommage qu'en mettant ce menu dans l'en tete, il passe derriere lesm odules quand il se deplie....

guy camy 01/08/2007 16:16

Alors comment fait on pou céer des menus déroulants sur over blog.
Merci

Thomas 31/07/2007 12:27

Bonjour PEUR !


Tout d'abord, félicitations pour ce script et merci pour l'avoir publier.

J'aurais une petite question : j'ai appliqué une couleur de fond "highlight" pour chaque menu. J'ai donc modifié le CSS. Pour l'affichage, pas de pb sous Firefox, mais sous IE6, ça se gatte. Je pense qu'il faut modifier le fichier .htc? mais comment expliquer dans ce fichier que je veux une couleur de "highlight" différente pour chaque menu ? Je bloque un peu alors si tu as un indice, n'hésite pas ;)


Par avance, merci.