Des menus en CSS3

Voici quelques modèles de menus conçus 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.

 

 

Menu horizontaux



Menus verticaux

Ces articles sont susceptibles de vous intéresser aussi :

Modèles de mise en page

Guide des propriétés CSS

Un dégradé CSS compatible I E

 

 

Menus Horizontaux

--> VOIR LA DEMO <--

Pour télécharger les fichiers de ce menu, c'est par ici

 

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;
}

 

Menus Verticaux

 

--> VOIR LA DEMO <--

Pour télécharger les fichiers de ce menu, c'est par ici

 

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

Code HTML de ce menu :

<div class="menu_div"> <!--menu -->
<ul>
<li><a href="#">Home</a></li>

<li><a href="#">Item01</a> <!--ouverture de Item01 -->
<ul class="sub-item1"> <!--sous menu de Item01 -->
<li><a href="#">sub-item01</a>
<ul class="sub-sub-item1"> <!--sous menu du sous menu de Item01 -->
<li><a href="#">sub-sub-item01</a></li>
<li><a href="#">sub-sub-item02</a></li>
<li><a href="#">sub-sub-item03</a></li>
</ul><!--fermeture sous menu du sous menu de Item01 -->
</li>
<li><a href="#">sub-item02</a></li>
<li><a href="#">sub-item03</a></li>
</ul> <!--fermeture du sous menu de Item01 -->
</li> <!--fermeture de Item01 -->

<li><a href="#">Item02</a>
<ul class="sub-item2"> <!--sous menu de Item02 -->
<li><a href="#">sub-item01</a></li>
<li><a href="#">sub-item02</a></li>
<li><a href="#">sub-item03</a></li>
</ul>
</li>

<li><a href="#">Item03</a>
<ul class="sub-item3"> <!--sous menu de Item03 -->
<li><a href="#">sub-item01</a></li>
<li><a href="#">sub-item02</a></li>
<li><a href="#">sub-item03</a></li>
<li><a href="#">sub-item04</a></li>
</ul>
</li>

<li><a href="#">Item04</a></li>
<li><a href="#">Item05</a></li>
<li><a href="#">Item06</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!--fin du menu -->

 

Code CSS de ce menu :

@charset "utf-8";
/* CSS Document */

/*######## ITEMS Principaux ############*/
.menu_div ul {
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:#FFF;
list-style:none;
text-indent:15px;
background:#333333;
width:220px;
position:absolute;
}

.menu_div ul li {
background:#333333;
line-height:40px;
border-bottom:1px solid #000;
height:40px;
}

.menu_div ul li:hover {
background:#4D4D4D;
}

.menu_div ul li a {
text-decoration:none;
color:#FFF;
display:block;
}

.menu_div ul li a:hover {
background:#4D4D4D;
}

.menu_div ul li#active {
background:#3ea5ea;
}
/*######## FIN règles ITEMS Principaux ############*/

/*######## ITEMS Secondaires ############*/
ul ul {
display: none;
}

li:hover ul.sub-item1 {
display:block;
left:200px;
top:41px;
position:absolute;
width:200px;
}

li:hover ul.sub-item2 {
display:block;
left:200px;
top:82px;
position:absolute;
}

li:hover ul.sub-item3 {
display:block;
left:200px;
top:123px;
position:absolute;
}

/*######## ITEMS Tertiaires ############*/
ul.sub-item1 li:hover ul.sub-sub-item1 {
display:block;
left:200px;
top:0px;
position:absolute;
width:200px;
}

 

 

Profitez bien de ces ressources !