Un menu vertical 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 :

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

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

macommune-moncommerce

Derniers ajouts