Voici un tutoriel qui va vous permettre de faire un beau menu déroulant tout en transparence entièrement en css.

Cette page est un peu longue, j'en convient, mais il est indispensable de bien lire du début à la fin.

L'utilisation de la transparence en css3 avec la notation hexadécimale RGBa va nous permettre de ne pas utiliser d'images pour rendre les cellules de nos menus transparentes.

Et cerise sur le gâteau !
Un menu qui est en plus compatible avec tous les navigateurs !
Oui, oui, j'ai bien tous ! (même IE !)
Enfin presque, car IE6 et inférieur pose problème, il existerait bien des solutions, mais j'en ai marre de IE, alors ben, je laisse tomber IE6 et pis temps pis pour lui ! (na!)

Ce menu a été testé avec IE7, IE8, firefox, google chrome, safari, opéra.

Voir ce beau menu dans votre navigateur !

Quelques explications sur la notation RGBa avant de commencer !

Vous connaissez peut être la propriété opacity, qui permet également de réduire l'opacité !

Seulement on rencontre plusieurs soucis avec cette propriété :

  • ne marche pas avec IE6.
  • puis l'opacité s'applique à tous ses descendants! C'est à dire, par exemple, que la transparence s'appliquera également à la police et non uniquement au fond !

La notation RGBa permet quand à elle, de n'appliquer un fond de couleur en transparence uniquement à un seul élément.

Comment ça marche ?

Et bien ce n'est pas compliqué ! Vous connaissez déjà surement la méthode RGB qui consiste à donner une valeur pour chaque couleur, je rappelle que RGB veut dire red, green, blue, on donne donc une valeur pour chaque couleur et on obtient ainsi la couleur désiré.

Pour la RGBa, on va rajouté une composante en dernier qui sera compris entre 0 et 1. ( 0.5 étant 50% de transparence )
Le code devient donc :

background-color: rgba(0, 0, 0, 0.5);

Pourquoi se compliquer la vie et ne pas utiliser d'images avec un fond transparent ?

Parce que j'aime bien ça moi, me compliquer la vie ! :lol:

J'ai voulu faire un menu accessible à tous qui nous dispense d'avoir à faire des images avec un fond transparent et qui permet également d'alléger un peu le chargement des pages.

Ok ! alors allons y !

Tout d'abord nous allons nous occuper de la partie HTML.

Pour mon menu, j'ai choisi de le faire avec des balises de listes, auquel j'ai indiqué des identifiants et des classes.

Dans mes listes <ul><li></li></ul> de premier niveau, j'y ai incorporé une autre liste pour mon sous menu.

Voici ma structure en html :
<ul id="menu">

<li>

<a href="#1">Menu 1</a>

<ul class="menuderoulant">

<li><a href="#2">sous menu </a></li>

<li><a href="#3">encore un sous menu !</a></li>

<li><a href="#4">bah ! allez un autre !</a></li>

</ul>

</li>

<li>

<a href="#5">Menu 2</a>

<ul class="menuderoulant">

<li><a href="#6">sous menu </a></li>

<li><a href="#7">et un autre</a></li>

<li><a href="#8">encore un</a></li>

<li><a href="#9">un autre</a></li>

<li><a href="#10">le même</a></li>

</ul>

</li>

<li>

<a href="#21">Menu 3</a>

<ul class="menuderoulant">

<li><a href="#11">et bin v'la un autre sous menu</a></li>

<li><a href="#12">et un autre</a></li>

<li><a href="#13">puis un autre</a></li>

<li><a href="#14">taratata</a></li>

<li><a href="#15">fait beau hein !</a></li>

<li><a href="#16">oui mais froid</a></li>

<li><a href="#17">jamais content celui-là</a></li>

<li><a href="#18">c'est sur</a></li>

<li><a href="#19">en même temps</a></li>

<li><a href="#20">c'est vrai</a></li>

</ul>

</li>

<li>

<a href="#22">Menu 4</a>

<ul class="menuderoulant">

<li><a href="#23">sous catégorie</a></li>

<li><a href="#24">ça change de sous menu</a></li>

<li><a href="#25">mettez-y ce qu'il vous plait</a></li>

<li><a href="#26">allez encore un</a></li>

<li><a href="#27">puis un autre</a></li>

<li><a href="#28">et puis un autre</a></li>

<li><a href="#29">c'est rudement joli hein !</a></li>

<li><a href="#30">moi ça me plait bien</a></li>

<li><a href="#31">pourait etre mieux </a></li>

<li><a href="#32">oui mais c'est plus cher !</a></li>

</ul>

</li>

</ul>

Ok pour la structure en html !

Passons maintenant à la partie la plus intéressante, celle qui va nous permettre de rendre ce menu transparent avec du style en CSS !

Je vais décomposer mon CSS en plusieurs partie pour essayer d'être plus clair !

Je vais donc commencer par détailler le CSS du menu de premier niveau ! (pas le sous menu)

#menu                         /*-----pour le menu horizontal-------*/
{
width:520px;            /*-----donner une largeur au menu, prendre en compte les marges-------*/
height: auto;           /*-----important pour IE7, mettre une hauteur auto sinon pas de menu deroulant------*/
list-style-type: none;  /*-----pas de puce-----*/
margin: 0 auto;         /*-----marge auto pour centrer mon menu dans l'élément-------*/
padding: 0;             /*-----marge interne à 0 et bordure à 0 pour ne pas avoir de soucis avec les différents navigateurs-----*/
border: 0;

}
#menu > li            /*------uniquement pour la liste de premier niveau-------*/
{
float: left;        /*------permet de mettre les items <li> horizontalement------*/
width: 120px;          /*------je donne une largeur à mes cellules-------*/
margin: 5px;           /*------j'espace mes cellules de 5px-------*/
padding: 0;
border: 0;
}
#menu li a                   /*------pour les liens de premier niveau-------*/
{
display: block;        /*------pour mettre mes liens en block------*/
color: #FFFFFF;         /*------donne une couleur à la police------*/
background-color: rgb(0, 0, 0);   /*------je donne un fond solide par sécurité pour les navigateurs qui ne reconnaissent pas la transparence-----*/
background-color: rgba(0, 0, 0, 0.5);     /*------fond transparent reconnus par les bons éléves-----*/
margin: 0;                                /*------mettre tout le monde d'accord--------*/
padding: 4px 8px;                         /*-----marge interne----*/
border:1px solid #FFFFFF;                 /*-----une bordure extérieur-------*/
text-decoration: none;               /*-----pas de décoration pour mes liens-----*/

}

#menu li a:hover {     /*-------une couleur de fond au survol sur mes liens-------*/
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}

/*---------------fin du menu de premier niveau-------------*/

Vous aurez remarqué que je déclare deux couleurs de fond (background).

Une déclaration solide pour les navigateurs qui ne prendraient pas la transparence, ceux-ci ignoreront la méthode rgba et appliqueront la méthode rgb.

Ensuite la partie pour le menu déroulant :

#menu .menuderoulant       /*----pour mon menu déroulant-------*/
{
display: none;          /*------pour le faire disparaitre------*/
list-style-type: none;  /*-------pas de puce-------*/
margin: 0;              /*------pas de marge interne et externe ni bordure pour mettre tout le monde d'accord--------*/
padding: 0;
border: 0;
position:absolute;   /*------pour ne pas pousser un éventuel texte dessous-----*/
}
#menu .menuderoulant li         /*-------pour ma liste de deuxième niveau-------*/
{
margin: 0;
padding: 0;
border: 0;
width: 140px;                /*----------je donne une largeur à mes cellules de sous menu----------*/
border-top: 1px solid transparent;       /*-----des bordures transparentes pour espacer mes cellules-----*/
border-right: 1px solid transparent;
}
#menu .menuderoulant li a         /*---------pour mes liens du menu deroulant---------*/
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);

}
#menu .menuderoulant li a:hover       /*------pour le survol du sous menu-------*/
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);

}

#menu .menuderoulant li a:visited {         /*---------pour permmetre au visiteur de savoir sur les liens qu'il a déjà visité--------*/
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}

#menu li:hover > .menuderoulant { display: block; }    /*------pour faire apparaitre notre sous menu au survol du menu de premier niveau------*/

Ok, voici donc notre css pour les très bons navigateurs !

Passons maintenant au css qui va nous permettre de bien afficher notre menu avec Internet Exlorer.

Eh oui ! Vous vous en doutiez, IE pose toujours problème.

IE ne connait pas cette méthode et n'affichera pas la transparence, il est néanmoins possible d'arriver au même résultat.

Pour ce faire nous allons utiliser le filtre gradient pour IE dans un commentaire conditionnel.

Le filtre gradient permet de déclarer un dégradé, je vais donc m'en servir.

Puis le commentaire conditionnel permet de déclarer dans une feuille de style ou dans une page html, l'interprétation du style qui ne sera lu que par internet explorer grâce à une syntaxe spéciale.

Il va donc falloir créer deux feuilles de styles CSS.


Une pour les bons élèves et une pour IE.

Voici la feuille de style pour IE :

#menu li a {

background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom:1;             /* important pour ie7*/
}

#menu li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80AFD601,endColorstr=#80AFD601);
zoom: 1;
}

#menu .menuderoulant li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000);
zoom: 1;
}

#menu .menuderoulant li a:hover {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C01259EF,endColorstr=#C01259EF);
zoom: 1;
}

#menu .menuderoulant li a:visited {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0E3161E,endColorstr=#C0E3161E);
zoom: 1;
}

Pour plus de clarté, voici les deux feuilles de styles que vous pouvez voir en pleine page :

CSS pour tous les navigateurs
CSS pour internet explorer seul.

Comment faire appel à ces deux fichiers CSS !

Pour faire appel au fichier CSS pour tous les navigateurs, vous le savez, on utilise ce code :

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />

Par contre pour notre cas ou l'on veut que IE ne lise uniquement le fichier qui lui est attribué, on utilise un commentaire conditionnel .

Voici ce fameux commentaire conditionnel !

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="design_ie.css" />
<![endif]-->

Voyez c'est la même chose sauf que l'on indique le chemin pour le fichier spécial pour ie, mais le plus important, c'est bien sur, la syntaxe qui permet le commentaire conditionnel.

Vous devez donc indiquer ces deux lignes de codes dans votre source.

Pour ceux qui n'utilisent pas de fichier css, mais qui insèrent le style directement dans la page html.

Le css pour IE de doit pas être placé avec le css global.

C'est à dire que vous devez faire deux déclarations de style, une pour le css normal et une déclaration pour IE, toujours entre les balises<head>

Une déclaration comme celle-ci:

<style type="text/css">

mettez votre style css entre ces deux balises

</style>

et une autre déclaration pour IE avec un commentaire conditionnel comme ceci :

<!--[if IE]>
<style type="text/css">
votre css pour IE
</style>
<![endif]-->

Résumé

Pour faire ce menu déroulant :

  1. premièrement :  structure html
  2. ensuite faire deux fichiers css, un pour tous les navigateurs et un pour IE, soit deux comme ça :

    3. CSS pour tous les navigateurs
    CSS pour internet explorer seul.

  3. faire deux appels pour les deux fichiers css, l'un normal et l'autre avec le commentaire conditionnel.

Et pour ceux qui n'utilisent pas de fichiers CSS, rendez vous sur cette page de test du menu et afficher la source pour comprendre comment insérer les CSS. ;)