Un menu horizontal en CSS3 et HTML5

Voici un modèle de menu conçu uniquement en CSS3 et HTML5.
A vous maintenant, a partir de cette base de création, de personnaliser le design, intégrer vos listes et sous-liste et définir les url de redirection.

Démonstration

Voir la demo
Telecharger les fichiers sources

Pour ceux qui souhaite consulter le code sans télécharger l'archive

Code HTML de ce menu :

<ul id="navigation" class="nav-main">
<li><a href="http://dbmwebdesign.fr">Accueil</a></li>
<li class="list"><a href="#">Tutos</a>
<ul class="nav-sub">
<li><a href="#">Themes</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">FLASH</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</li>
<li class="list"><a href="#">Ressources</a>
<ul class="nav-sub">
<li><a href="#">Web Design</a></li>
<li><a href="#">Outils</a></li>
<li><a href="#">Integration</a></li>
</ul>
</li>
<li><a href="#">Astuces</a></li>
<li><a href="#">Contact</a></li>
</ul>

Code CSS de ce menu :

#navigation { /*conteneur du menu*/
padding: 0;
clear:both;
width:858px;
height:51px;
background: #333;
border: solid 1px #666;
}

ul.nav-main li { /*règles générales des items de liste */
list-style: none;
margin: 0;
border-right:solid 1px #666;
}

ul.nav-main { /*règles des items principaux*/
position: relative;
z-index: 597;
}

ul.nav-main li:hover > ul { /*apparition des sous-listes au survol de l'item principal ul*/
visibility: visible;
}

ul.nav-main li:hover { /*design des items de liste au survol*/
position: relative;
z-index: 599;
cursor: pointer;
background: #666;
}

ul.nav-main li { /*positionnement, dimensions, couleurs et textes des items de liste*/
float:left;
display:block;
height: 51px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
}

ul.nav-main li a { /*positionnement, dimensions, couleurs et textes des items de liste intégrant une redirection url*/
display: block;
padding: 16px 16px 0 16px;
height: 35px;
color: #999;
font: 14px Arial, Helvetica, sans-serif;
text-decoration:none;
}

ul.nav-main li a:hover { /* couleurs des items de liste au survol*/
color:#D6D6D6;
}

ul.nav-main *.list { /*décalage entre chaque items principaux*/
padding-right: 22px;
}

ul.nav-sub { /*règles de la liste ul de sous menus*/
visibility: hidden;
position: absolute;
padding:10px;
top: 51px;
left: -2px;
z-index: 598;
background: #333;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}

ul.nav-sub li { /* regles des items de liste sous menu */
list-style:none;
display:block;
padding: 0;
height: 27px;
float: none;
width:145px;
border-bottom: 1px solid #5a5a5a;
border-right:none;
background: none;
}

ul.nav-sub li a { /* règles des items de liste de sous menus intégrant une redirection url */
list-style:none;
display:block;
padding: 6px 5px 6px 5px;
height: 15px;
float: none;
width:145px;
background: none;
font: 12px Arial, Helvetica, sans-serif;
}

Vous pouvez maintenant intégrer un menu full CSS / HTML, léger et facile à personnaliser, sur votre site Web.

macommune-moncommerce

Derniers ajouts