Menu déroulant vers le haut
Voici un tutoriel qui va vous permettre de faire un beau menu déroulant vers le haut tout en transparence entièrement en css.
Bon d'accord ce n'est peut être pas un menu très utilisé, d'ailleurs je ne me rappelle pas en avoir vu.
Mais on me l'avais demandé un jour et comme j'aime bien ce genre de petit défi (pour mon niveau 
) je l'ai crée et je m'en vais vous en faire profiter, ça peut toujours servir ! 
Pour réaliser ce menu je suis parti de mon menu horizontal que vous trouverez ici
Je ne vais pas détailler le code du menu déroulant vers le haut, mais juste notifier les modifications apportées par rapport au tutoriel du menu déroulant horizontal.
Donc si vous voulez des précisions sur les codes, comme en savoir plus sur la notation RGBa ou sur les commentaires conditionnels ou bien encore comment faire appel aux fichiers css, je vous demanderais de bien vouloir consulter ce tutoriel.
Comme le menu horizontal, celui-ci est compatible avec tous les navigateurs les plus utilisés et a été testé avec IE8, firefox, google chrome, safari, opéra.
Par contre celui-ci ne marche pas avec les versions inférieur à IE8.
menu déroulant vers le haut
Voir ce menu dans votre navigateur
Voici la structure html qui est la même que pour le menu horizontal ainsi que le menu vertical.
<ul id="menu"> <li> <a href="#1">Menu 1</a> <ul> <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> <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> <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> <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">pourrait etre mieux </a></li> <li><a href="#32">oui mais c'est plus cher !</a></li> </ul> </li> </ul>
Passons maintenant aux fichiers css
Tout d'abord le css général pour tous les navigateurs.
Je rappelle que je ne détaille pas tout le code css ici, si vous souhaitez avoir du détail rendez vous sur le tuto du menu déroulant.
Dans ce code, je reprend en fait l'intégralité du css du menu déroulant, auquel vous trouverez juste les modifications que j'ai faite pour le rendre vers le haut.
#menu
{
width:520px;
height: auto;
list-style-type: none;
margin: 0 auto;
padding: 0;
border: 0;
top:250px; /* pour placer mon menu dans son élément prenant en compte la hauteur du sous menu */
position:relative; /* important pour bien placer le menu par rapport aux 250px indiqué avant */
}
#menu > li
{
float: left;
width: 120px;
margin: 0 5px; /* une marge de 0 pour le haut est importante pour ne pas avoir d'espace entre le menu et le sous menu sinon vous rencontreriez des soucis */
padding: 0;
border: 0;
}
#menu li a{
display: block;
color: #FFFFFF;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
margin: 0;
padding: 4px 8px;
border:1px solid #FFFFFF;
text-decoration: none;
}
#menu li a:hover {
background-color: rgb(175, 214, 1);
background-color: rgba(175, 214, 1, 0.5);
}
/*---------------fin du menu de premier niveau-------------*/
/*---------------début du menu déroulant-------------------*/
#menu .menuderoulant
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
bottom:0;
position:absolute; /* c'est ici que j'inverse mon menu pour le faire partir vers le haut */
}
#menu .menuderoulant li
{
float: none;
margin: 0;
padding: 0;
border: 0;
width: 140px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
}
#menu .menuderoulant li a
{
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
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);
}
#menu .menuderoulant li a:visited {
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}
#menu li:hover > .menuderoulant { display: block;}
/*----------fin du menu déroulant----------------*/
Ensuite le css pour IE uniquement.
Dans ce css nous utiliserons le filtre gradient pour IE dans un commentaire conditionnel.
Pour en savoir plus sur le filtre gradient et le commentaire conditionnel, veuillez consulter le tutoriel du menu horizontal.
#menu li a {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
zoom:1;
}
#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;
}
Il vous faut donc deux feuilles de styles, une pour les bons élèves et une pour IE.
Je vous met les deux feuilles de styles que vous pourrez visualiser dans votre navigateur pour plus de clarté :
CSS pour tous les navigateurs
CSS pour internet explorer seul.
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.
Enfin si vous voulez savoir comment faire appel aux fichiers css, rendez vous sur le tuto horizontal.
Vous pouvez aussi visualiser la source de cette page pour plus d'information : page de test
Voila c'est fini, si vous avez aimé ce tutoriel, n'hésitez pas à me laisser un commentaire, ça fait toujours plaisir !