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

Mercredi 29 mars 2006

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

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

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.

commentaires (0) publié dans : CSS