Dans ce tutoriel HTML & CSS, nous allons vous montrer comment créer un très beau menu déroulant. Nous allons bien évidemment utiliser les nouveaux attributs des langages HTML & CSS qui enjolivent toujours plus nos sites web
1ère étape : créer le menu en HTML
<div id="content">
<ul>
<li><a href="#">Amis <span>340</span></a></li>
<ul>
<li><a href="#">Famille<span>14</span></a></li>
<li><a href="#">Ecole<span>6</span></a></li>
<li><a href="#">Travail<span>2</span></a</li>
</ul>
</li>
<li><a href="#">Videos <span>147</span></a>
<ul>
<li><a href="#">Sport<span>14</span></a></li>
<li><a href="#">Musique<span>6</span></a</li>
<li><a href="#">Cuisine<span>2</span></a</li>
</ul>
</li>
</ul>
</div>
2ème étape : le style CSS
body {
font-size: 100%;
background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#content {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
background-color: #616975;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
border-bottom: 1px solid #33373d;
-webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
-moz-box-shadow: inset 0px 1px 0px 0px #878e98;
box-shadow: inset 0px 1px 0px 0px #878e98;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #fff;
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #35afe3;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
border-bottom: 1px solid #103c56;
-webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
-moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
.menu > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%;
background: #48515c;
line-height: 1em;
height: 1em;
padding: .4em .6em;
margin: -.8em 0 0 0;
color: #fff;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: .769em;
border-radius: .769em;
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
text-shadow: 0px 1px 0px rgba(0,0,0,.5);
font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
background: #2173a1;
}
.menu > li > ul li a:before{
content: '';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #32373D;
}
.menu ul > li > a span {
font-size: 0.857em;
display: inline-block;
position: absolute;
right: 1em;
top: 50%; /
background: #fff;
border: 1px solid #d0d0d3;
line-height: 1em;
height: 1em;
padding: .4em .7em;
margin: -.9em 0 0 0;
color: #878d95;
text-indent: 0;
text-align: center;
-webkit-border-radius: .769em;
-moz-border-radius: 769em;
border-radius: 769em;
text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}
Ces quelques lignes demandent un léger éclaircissement. Nous utilisons beaucoup d’attributs permettant d’obtenir des effets dégradés et ombrés (attribut ‘shadow’ et gradient).
Le sprite image pour les icônes
Vous l’aurez sûrement remarqué mais dans ce CSS, nous appelons une seule et unique image que l’on positionne grâce aux coordonnées numérique de telle sorte à limité le nombre de requête pour aller chercher les images.
.menu > li > a:before {
content: '';
background-image: url(../images/sprite.png);
background-repeat: no-repeat;
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.item1 > a:before {
background-position: 0 0;
}
.item2 > a:before {
background-position: -38px 0;
}
.item3 > a:before {
background-position: 0 -38px;
}
.item4 > a:before {
background-position: -38px -38px;
}
.item5 > a:before {
background-position: -76px 0;
}
3ème étape : du jQuery pour dynamiser
La bibliothèque directement prise à la source pour bénéficier de la rapidité des serveurs.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
La fonction javascript qui nous permettra de gérer les différents comportements au clic
$(function() { var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function(e) {
e.preventDefault();
if(!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true,true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true,true).slideUp('normal');
}
});
});