Menu déroulant CSS avec PNG transparent
ATTENTION !!! CE TUTORIEL NE FONCTIONNE PAS SUR TOUS LES NAVIGATEURS, UNE NOUVELLE VERSION REMPLACERA CELLE-CI D’ICI PEU. MERCI !
Est-ce possible de créer ce genre de menu ? Oui effectivement, après plusieurs heures d’essai, de recherche et ainsi de suite, j’ai finalement réussi à créer ce menu de rêve. J’ai également pris le temps de commenter le code CSS de ce menu et je vous livre la démarche pour la construction de ce dernier.
Cliquez ici pour voir l’exemple du menu (regardez bien,les boutons sont transparents)
Si vous vous sentez d’attaque, vous pouvez utiliser le code de ce menu et ainsi avoir vous aussi un menu transparent. Je mets à la disposition de tous cet ouvrage. Merci de bien vouloir créer un lien vers Nubium Graphik pour ceux qui utiliseront ce menu.
LES OUTILS
Voici les outils nécessaires pour réaliser ce menu.
csshover.htc(permet de faire des HOVER dans explorer sur tous les tags)
créé par Peter Nederlof
replacePngTags.php (permet d’afficher des PNG transparent, fichier compressé)
créé par Justin Koivisto
A quoi servent ces 2 fichiers ?
C’est simple, le fichier csshover.htc est un script behavior détecté seulement par internet explorer. Il permet une fonctionnalité importante pour le menu. Sans lui, les tag LI ne pourrait avoir la propriété HOVER. (ex.: LI:HOVER) Si l’utilisateur utilise un autre navigateur, la commande pour activer ce fichier sera simplement ignoré.
Le fichier replacePngTags.php est le fichier nécéssaire pour afficher les png transparent. Ce hack est affiché que dans le fichier alphaCSS.php. Il détecte votre navigateur et génère le code nécéssaire pour l’affichage de l’image de fond (background). Donc si vous utilisez internet explorer, il convertira la ligne:
background-image:url(monImage.png);
en
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop, src=’monImage.png’);"
Ce code CSS est propre à internet explorer et permet d’afficher la transparence, si vous utilisez un autre navigateur comme Firefox, il laissera la ligne tel quel.
CRÉER L’IMAGE
Créé une image de fond de 100px X 20px (s’applique à notre exemple) avec de la transparence.
Ensuite ajustez la taille de cette image à 200px de large, la nouvelle partie ajouté sera l’effet hover. Mettez les propriété voulu pour la nouvelle partie Hover.
N’oubliez pas de sauvegardez en PNG 24 bit avec transparence. Nommez cette image, dans notre cas (menuBouton.png).
ATTENTION : Si vous ne voulez pas de transparence, vous n’êtes pas obligé d’utiliser le fichier replacePngTags.php et le fichier alphaCSS.php non plus.
LE CODE XHTML
Premièrement, vous devez construire votre menu avec la meilleure sémantique possible, c’est pourquoi nous utiliserons les UL et LI (listes). Commençons par mettre une DIV avec un ID spécifique qui nous permettra de positionner notre menu n’importe ou.
<div id="menu">
</div>
Ensuite, insérez le code suivant à l’intérieur de votre tag DIV. Chaque colonne du menu correspond à un LI. L’exemple ci-dessous en a 4. Créé également une class pour les LI, cela aidera pour la compréhension sur certain navigateur.
<div id="menu">
<ul>
<li class="drop"></li>
<li class="drop"></li>
<li class="drop"></li>
<li class="drop"></li>
</ul>
</div>
A l’intérieur de chaque LI, insérons maintenant des tags SPAN avec le nom de nos menus. Ensuite mettons un lien sur nos tags SPAN.
<div id="menu">
<ul>
<li class="drop"><a href="index.htm"><span>MENU A</span></a></li>
<li class="drop"><a href="index.htm"><span>MENU B</span></a></li>
<li class="drop"><a href="index.htm"><span>MENU C</span></a></li>
<li class="drop"><a href="index.htm"><span>MENU D</span></a></li>
</ul>
</div>
Maintenant nous allons créer les sous-menus. La meilleure méthode est de créé une autre liste à l’intérieur de nos LI. Insérer cette liste à la suite du lien de la tag SPAN. Je vous recommande de mettre des title sur les liens.
<div id="menu">
<ul>
<li class="drop"><a href="index.htm"><span>MENU A</span></a>
<ul>
<li><a href="index.htm" title="Sous-Menu A1"><span>Sous-Menu A1</span></a></li>
<li><a href="index.htm" title="Sous-Menu A2"><span>Sous-Menu A2</span></a></li>
<li><a href="index.htm" title="Sous-Menu A3"><span>Sous-Menu A3</span></a></li>
</ul>
</li>
<li class="drop"><a href="index.htm"><span>MENU B</span></a>
<ul>
<li><a href="index.htm" title="Sous-Menu B1"><span>Sous-Menu B1</span></a></li>
<li><a href="index.htm" title="Sous-Menu B2"><span>Sous-Menu B2</span></a></li>
</ul>
</li>
<li class="drop"><a href="index.htm"><span>MENU C</span></a>
<ul>
<li><a href="index.htm" title="Sous-Menu C1"><span>Sous-Menu C1</span></a></li>
<li><a href="index.htm" title="Sous-Menu C2"><span>Sous-Menu C2</span></a></li>
<li><a href="index.htm" title="Sous-Menu C3"><span>Sous-Menu C3</span></a></li>
</ul>
</li>
<li class="drop"><a href="index.htm"><span>MENU D</span></a>
<ul>
<li><a href="index.htm" title="Sous-Menu D1"><span>Sous-Menu D1</span></a></li>
<li><a href="index.htm" title="Sous-Menu D2"><span>Sous-Menu D2</span></a></li>
<li><a href="index.htm" title="Sous-Menu D3"><span>Sous-Menu D3</span></a></li>
<li><a href="index.htm" title="Sous-Menu D4"><span>Sous-Menu D4</span></a></li>
<li><a href="index.htm" title="Sous-Menu D5"><span>Sous-Menu D5</span></a></li>
<li><a href="index.htm" title="Sous-Menu D6"><span>Sous-Menu D6</span></a></li>
</ul>
</li>
</ul>
</div>
Dans le head, créé vos tags « style » comme suit :
<style type="text/css" media="screen">@import url(behavior.css);</style>
<style type="text/css" media="screen">@import url(alphaCSS.php);</style>
<style type="text/css" media="screen">@import url(menu.css);</style>
LE CODE CSS
Voici la partie intéressante de l’intégration, les css. Voici le code utilisé étape par étape. N’oubliez pas d’importer votre ficher CSS de votre page. Créez vous le fichier suivant (menu.css) Nous insérerons le code CSS à l’intérieur de celui-ci. Créez également un fichier nommée (behavior.css) et un autre (alphaCSS.php), n’oubliez pas l’extension php. Ce fichier ne sera pas nécéssaires si vous n’utilisez pas les png transparents.
Le fichier behavior.css
Cette ligne permettra de corriger les :hover dans internet explorer.
body { behavior:url("csshover.htc"); }
Le fichier alphaCSS.php
Dans ce fichier, insérer seulement les backgrounds en PNG transparent avec leurs tags respectives. Voici dans notre cas quoi mettre :
<?php
header("Content-type: text/css; charset=iso-8859-1");
?>
<?php ob_start(); ?>
#menu span { background-image:url(menuBouton.png); }
<?php
include_once "replacePngTags.php";
echo replacePngTags(ob_get_clean());
?>
ATTENTION, la ligne (include_once ‘replacePngTags.php’) suppose que votre fichier est dans la racine de ce menu. Votre image PNG doit être elle aussi à la racine.
Le fichier menu.css
Voici le code du menu commenté, si vous avez des questions, posez les sur le forum.
/* Auteur: Patrick Perron */
/* Site web: Nubium Graphik - http://www.nubiumgraphik.com */
/* Version: 1.03 */
/* Compatible: Explorer, Firefox, Opera, Netscape 7+, Safari, Konqueror et + */
/* Avantage: Ultra léger, facilement modifiable, permet le PNG transparent,
permet des effet hover sans javascript (seulement dans Explorer),
sémantique excellente et optimisé SEO (Search engine optimisation) */
/* Merci de bien vouloir faire un liens vers Nubium Graphik si vous utilisez ce menu */
/* Pour toute question, veuillez utiliser le Forum de Nubium Graphik, Merci ! */
/* Nécéssaire pour ne pas boguer les UL et LI dans Opera */
body {
margin:0px;
padding:0px;
background:url(bgKinologik.jpg) repeat-x;
background-color:#000000;
}
/* Position du menu, la position peux être en relative */
#menu {
position: absolute;
left: 50px;
top: 50px;
}
/* On enlève les puces, le padding et le margin */
#menu ul {
padding: 0px;
margin: 0px;
list-style-type:none; /* Cette ligne enlève les puces */
}
/* Dimension des boutons, couleur de background, disposition initiale sur une ligne
NOTE: affecte la class "drop" */
li.drop {
display: block;
position:relative;
width: 100px; /* Largeur visible du bouton */
height: 20px;
overflow:hidden; /* Permet de cacher la partie débordante de l’image */
float:left;
border-right: solid 1px #000000; /* Cette ligne est pour l’esthétique, elle sépare les boutons d’une bordure */
}
/* L’effet hover affiche la hauteur automatiquement par rapport au nombre de LI
NOTE: affecte la class "drop" */
li.drop:hover {
height:auto;
}
/* Bordure qui sépare chaques boutons
NOTE: affecte le dernier niveau des boutons */
#menu ul li ul li {
border-top: solid 1px #000000; /* Cette ligne est pour l’esthétique, elle sépare les boutons d’une bordure */
}
/* Permet de corriger les espaces entre chaque LI dans EXPLORER
NOTE: affecte le dernier niveau des boutons */
*html #menu ul li ul li { float:left; }
/* On met nos liens du menu en block et donne un style au texte des boutons */
#menu a {
display:block;
width:100px; /* Largeur visible du bouton */
height: 20px;
overflow:hidden;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#FF6600;
text-decoration:none;
}
/* effet hover des liens */
#menu a:hover {
color:#FFFF99;
}
/* Permet d’insérer un background VIA le FIX PNG */
#menu span {
display: block;
position: relative;
width: 200px; /* 2x la largeur visible du bouton */
height: 17px; /* Soustrayez le "padding-top" de la hauteur initiale de votre bouton */
padding-left: 5px; /* Cette ligne permet de positionner le texte de votre bouton sur l’horizontal */
padding-top: 3px; /* Cette ligne permet de positionner le texte de votre bouton sur le vertical */
background-repeat:no-repeat;
cursor:pointer;
/* background-image:url(menuBouton.png); CETTE LIGNE EST ÉCRITE DANS LE FICHIER "ALPHACSS.PHP" */
/* le background sera générer dynamiquement dépendant du navigateur */
}
/* On décale la tag SPAN de 100 px vers la gauche - pour ne pas perdre le texte dans la zone
hidden on lui met un padding-left de 105px */
#menu a:hover span {
left: -100px;
padding-left: 105px;
}
Voici maintenant le résultat cliquez ici
NOTE: Pour une meilleure optimisation, vos pages MENU A, MENU B, MENU C etc… devrons contenir les mêmes liens que vos sous-menu respectif. Si un utilisateur avec Internet Explorer aurait désactivé le Javascript, il aurait seulement les MENU d’afficher avec effet rollover, transparence et liens effectif. Donc mettez à l’intérieur de vos pages des liens pour accéder vos pages 
.
11 novembre 2006 at 16:27
pas mal du tout ça m’a beaucoup servi mais tout le code du menu commenté n’est pas écrit ? si?
23 novembre 2006 at 0:39
Je test ce code dès que je rentre chez moi, c’est exactement ce qu’il me fallait !
9 décembre 2006 at 10:50
Très bon menu déroulant.
Merci bien.
Une petite remarque : tu as oublié de refermer les balises ul dans le code xhtml du menu.
9 décembre 2006 at 23:14
Merci beaucoup d’avoir remarqué l’erreur, c’était une petite erreur de transcription !!!
8 janvier 2007 at 13:52
Tout d’abord je voudrais te remercier pour ton travail, c’est vraiment super de lire ton tuto, je commence a comprendre des choses et programmation de sites web.
Je voudrais faire des sous-sous-rubriques pour mon menu. J’ai ajouté de nouvelles balises au bon endroit mais cela ne fonctionne pas. Je pense que ca vient du fait que le menu est horizontal. C’est pour cela que je voudrais savoir comment le rendre vertical, et a gauche tant qu’a faire…Les sous-menu appararaitrait alors successivement vers la droite.
Merci pour ton aide. Tu peux me contacter avec mon adresse email que j’ai laissé dans le formulaire, ou bien ici meme, je surveillerai cette page au cas ou …
9 janvier 2007 at 11:26
Bonjour super tuto par contre je vois qu’avec firefox le menu s’affiche pas vous pouvez aller voir là : http://82.233.154.242/test/menu.html
Si qqun à une idée
9 janvier 2007 at 12:09
c’est bon c’était de ma faute j’avais fermé mes balise trop tot
par contre il y a un reel pb avec IE 7 ont peut afficher les sous menu mais ont ne peux pas y acceder il y a un ecart trop important et ont perd le hover 
9 janvier 2007 at 12:28
Je viens de le tester avec IE7 et ca fnction très bien !!! C’est peut-être ton navigateur !!!
10 janvier 2007 at 2:18
Salut merci de ta réponse mais il y avait tout de même un problème pour que ça marche parfaitement avec ie7 c’est à dire qu’on peut acceder au sous menu il faut rajouter la classe drop sur les des sous menus et du coup l’espace entre le menu et les differents sous menus sont du bon espace donc ont ne perd pas le :hover
Par contre j’ai un autre probleme je fais mes boutons avec fireworks que j’enregistre bien en en png mais je n’ai pas la transparence avec ie6, alors peut etre que je mis prends mal j’ai fais mes menus avec un angle arrondis et normalement mais la ça ne marche pas tu peux aller voir à cette adresse : http://www.creation3w.com/test/menu.html
10 janvier 2007 at 8:33
c’est bon c’est corrigé c’était une petite erreur dans ton tuto la ligne : include_once ‘replacePngTags.php’; doit etre remplacé par include_once ‘replacePngTags.php’; c’est l’histoire dans petit guillemet mais ça suffit pour pas prendre en compte le fichier le plus important pour la transparence
Sinon c’est où qu’on modifie pour affiché le sous menu vers haut?
14 janvier 2007 at 5:37
Bonjour,
Je trouve votre code intérressant et esthétique. J’ai fait la mise en oeuvre. Transparence, et première ligne de menu OK. Mais par contre les sous-menus n’apparaissent pas! J’ai beau cherché, là je séche ! Auriez-vous une petite idée ?
Je me demande si c’est pas lié à mon fournisseur d’accés ?
Le site concerné est le suivant http://my7.ifrance.com/
Merci pour votre aide.
14 janvier 2007 at 6:34
Alors je viens de faire le test sous Firefox, et celà fonctionne ! Donc, celà doit être un histoire de bug IE. Alors que dois-je faire, car j’ai bien suivi ton tuto ?
Merci pour ta réponse.
14 janvier 2007 at 8:23
Yesssss!
il suffit de modifier le fichier *.htc ainsi :
ligne 34 :
Avant :
function parseStylesheets() {
if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
Aprés :
function parseStylesheets() {
if(!/MSIE (5|6|7)/.test(navigator.userAgent)) return;
21 janvier 2007 at 12:23
Enfin !!!
Merci beaucoup pour ce tuto, c’est ce que je cherche depuis tellement de temps !
Petite question cependant, je cherche en vain comment centrer le menu ?
Pourriez-vous m’aider ?
Merci d’avance.
25 janvier 2007 at 12:59
/*Menu droite*/
#menu {
width:176px;
float:left;
margin:1px;
margin-top:90px;
font-size:13px;
color:#6E6967;
text-align:center;
background-color: #CBBBAE;
font:footlight MT light;
}
#menu p {
}
#menu a {
color:#AC8E7B;
text-decoration:none;
}
#menu a:hover {
color:rgb(231,172,80);
background-color:#DFD6CE;
}
#menu h3 {
font:tahoma;
font-size: 0px;
font-weight:bold;
height:38px;
margin:20px 0 10px 0;
}
#menu h3.aboutme {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.madescription {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg); no-repeat;
font-size:18px !important;
color:#555354;
}
#menu h3.rubriqueh3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.albumsh3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.favorish3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.cpth3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.pubh3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.rssh3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.tagsh3 {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
#menu h3.titreplayer {
background:url(http://membres.lycos.fr/domisteph85/one%20tree%20hill/menu.jpg);
font-size:18px !important;
color:#555354;
}
mon code est ainsi. et je ne sais pas du tout comment je pourrais faire pour mettre les titres des rubriques en liens. pour pouvoir appliquer, le code. Merci de m’aider. vous pouvez voir le site en question , c’est un blog.
http://domisteph.bloxode.com
25 janvier 2007 at 14:05
Bonjour dominique, première est-ce que tu peux mettre ta question dans le forum, cela sera plus facile à suivre. Merci ! SVP, détaille un peu plus ce que tu essai de faire !
10 septembre 2007 at 10:46
Bonjour à tous
Merci beaucoup pour ce tuto, mais je n’arrive pas à faire apparaitre le fond menubouton.png, cela vient de mon fichier alphaCSS.php, je n’arrive pas à trouver le problème. J’ai donc modifier ce fichier pour n’y mettre que la ligne “#menu span { background-image:url(menuBouton.png); }”, ça s’affiche bien avec Firefox et IE7, mais évidement, je n’ai plus la transparence avec IE6.
8 février 2008 at 7:49
bonjour
pareil pour moi, g bien suivi le protocole. ça marche parfaitement sous FF mais pas sous IE: le menu s’affiche mais qd on survole menu A,B,C et D il ne se passe rien, les sous menu ne s’affichent pas… :’(
Auriez vous la solution?
je vous remercie!