Programmation ⇒ html/css3 facebook twitter youtube

Menus HTML - CSS ⇒ & Menu horizontal



Menu horizontal avec class pour onglet page courante

Créé un menu html

<ul class="menu">
  <li class="cssmenu"><a href="#"><b>Accueil</b></a></li>
  <li><a href="#"><b>Script</b></a></li>
  <li><a href="#"><b>Tuto</b></a></li>
  <li><a href="#"><b>Blog</b></a></li>
  <li><a href="#"><b>Fourm</b></a></li>
  <li><a href="#"><b>Contact</b></a></li>
</ul>

Le style de la page

.menu {padding:0 0 0 1em; margin:0; list-style:none; height:43px; position:relative; background:transparent url(../images/back.gif) repeat-x left top; font-size:11px;}
.menu li {float:left; height:43px;}
.menu li a {display:block; float:left; height:40px; line-height:35px; color:#888; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(../images/0a.gif) no-repeat;}
.menu li a b {float:left; display:block; padding:0 60px 0 0; background:url(../images/0.gif) no-repeat right top;}
.menu li.cssmenu a {color:#000; background:url(../images/2a.gif) no-repeat;}
.menu li.cssmenu a b {color:#000; background:url(../images/2.gif) no-repeat right top;}
.menu li a:hover {color:#000; background: url(../images/2a.gif) no-repeat;}
.menu li a:hover b {color:#000; background:url(../images/2.gif) no-repeat right top;}
.menu li.cssmenu a:hover {color:#000; cursor:default;}

 

Les images :

 0.gif

0a.gif

 2.gif

2a.gif

 back.gif

 

Démo ici

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces