Un simple menu principal déroulant avec un niveau de sous-menu sans Javascript.navigation, role
Django Blais
Un simple menu principal déroulant avec un niveau de sous-menu sans Javascript.
<style>
.menu {
width:100%;
background: #555;
display: inline-block;
min-width: 640px;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu ul li {
display: block;
position: relative;
float: left;
}
.menu .droite {
float: right;
}
.menu li ul {
display: none;
min-width: 150px;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 10px;
background: #555;
white-space: nowrap;
}
.menu ul li a:hover {
background: #999;
}
.menu li:hover ul {
/* Ici l’affichage du sous-menu */
display: block;
position: absolute;
}
.menu li:hover li {
float: none;
}
.menu li:hover a {
background: #999;
}
.menu li:hover li a:hover {
background: #555;
}
</style>
<nav role="navigation" class="menu">
<ul>
<li><a href="#0">Acceil</a></li>
<li><a href="#0">Produits</a>
<ul>
<li><a href="#0">Liste des produits</a></li>
<li><a href="#0">Votre panier</a></li>
<li><a href="#0">Votre compte</a></li>
</ul>
</li>
<li><a href="#0">Partenaires</a>
<ul>
<li><a href="#0">Liste des partenaires</a></li>
<li><a href="#0">Devenez partenaire</a></li>
<li><a href="#0">Événements</a></li>
<li><a href="#0">FAQ</a></li>
</ul>
</li>
<li><a href="#0">Recherche</a></li>
<li><a href="#0">À propos</a></li>
<li class="droite"><a href="#0">Nous joindre</a></li>
</ul>
</nav>
Django Blais, Analyste programmeurtrucsweb.com/oznog/Conception oznogco multimédia (https://oznogco.com), Trucsweb Dernière mise à jour :
Commentaires
Bonjour,
Sympa le menu déroulant juste en css. Mais et pour le côté responsive ? Personne n'y pense et c'est pourtant devenu essentiel à notre époque.
Bonne journée
Valérie
Valérie
Date (GMT) : 2020-01-14 10:01:27 (UTC +0000)
Date local : Tue Jan 14 2020 11:05:26 GMT+0100 (heure normale d
7/10 sur 1 revues.
Visites : 14654 - Pages vues : 15196
En ligne depuis 27 ans (1997-2024)
Le plus vieux site francophone pour freelances!
Il y a 10 types de personnes, ceux qui comprennent le binaire et ceux qui ne le comprennent pas ;-)