Exemple de mise en page CSS : un bon menu CSS+JS à deux niveaux

Auteur：Eve Cole Date de mise à jour：2009-06-11 17:43:37

Les menus CSS ont toujours été un sujet brûlant parmi les internautes, et il existe un grand nombre d'exemples sur downcodes.com.
Le menu à deux niveaux CSS+JS présenté aujourd'hui provient du super groupe des downcodes et est un document partagé publié par les internautes.

Le rendu final est le suivant :

Regardez son code HTML :

div css xhtml xml Exemple de code source

Exemple de code source [www.downcodes.com]

Accueil
Société
Produits
Nos travaux
Actualités
Boutique

href="http://www.downcodes.com/">À propos de nous href="http://www.downcodes.com/">Que faisons-nous ? href="http://www.downcodes.com/">Rencontrez l'équipe href="http://www.downcodes.com/">Pourquoi travailler avec nous ? href="http://www.downcodes.com/">Politique de qualité href="http://www.downcodes.com/">Conditions href="http://www.downcodes.com/">Témoignages href="http://www.downcodes.com/">Visite du Lexus

href="#">Clexus Privé
Messagerie Image
Galerie Client
Gestion href="#">Modèle
Travaux

href="#">Web
Conception href="#">Web
Développement href="#">Logo
Conception href="#">Imprimer
Conception

href="#">Actualités Lexus
Joomla
Actualités href="#">Actualités générales

Ci-dessous le code CSS :

Exemple de code source [www.downcodes.com]

corps{text-align:center}
.cx_tabmenu {
REMBOURRAGE-HAUT : 2 px ; COULEUR DE FOND : #474747 ; LARGEUR : 790 px ;
}
#ddimagetabs {
REMBOURRAGE-GAUCHE : 10 px
}
#ddimagetabs A {
REMPLISSAGE À DROITE : 20 px ; BORDURE EN HAUT : #666666 1 px solide ; AFFICHAGE : en ligne ; REMPLISSAGE À GAUCHE : 20 px ; ARRIÈRE-PLAN : #363636 ; 2px ; PADDING-TOP : 0px ; FONT-FAMILY : Verdana, Arial, Helvetica, sans-serif ; HAUTEUR : 33px ;
}
#ddimagetabs A: survolez {
BORDURE-HAUT : #ffffff 1px solide ; FOND : url(../images/cx_menu_hover.jpg) #363636 bas central sans répétition ;
}
#ddimagetabs A.courant {
BORDURE-HAUT : #ffffff 1px solide ; FOND : url(../images/cx_menu_hover.jpg) #363636 bas central sans répétition ;
}
A.sclink:lien {

}
A.sclink : visité {

}
A.sclink : survoler {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1: survoler {
BORDURE-HAUT : #ff9900 1px solide
}
#ddimagetabs .current#sclink1 {
BORDURE-HAUT : #ff9900 1px solide
}
#sc1 A:lien {

}
#sc1 A : visité {

}
#sc1 A : survolez {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2: survolez {
BORDURE-HAUT : #990099 1px solide
}
#ddimagetabs .current#sclink2 {
BORDURE-HAUT : #990099 1px solide
}
#sc2 A:lien {

}
#sc2 A:visité {

}
#sc2 A : survolez {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3: survolez {
BORDURE-HAUT : #0099cc 1px solide
}
#ddimagetabs .current#sclink3 {
BORDURE-HAUT : #0099cc 1px solide
}
#sc3 A:lien {

}
#sc3 A : visité {

}
#sc3 A : survolez {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4: survolez {
BORDURE-HAUT : #78ba00 1px solide
}
#ddimagetabs .current#sclink4 {
BORDURE-HAUT : #78ba00 1px solide
}
#sc4 A:lien {

}
#sc4 A:visité {

}
#sc4 A : survolez {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5: survolez {
BORDURE-HAUT : #99cccc 1px solide
}
#ddimagetabs .current#sclink5 {
BORDURE-HAUT : #99cccc 1px solide
}
#sc5 A:lien {

}
#sc5 A : visité {

}
#sc5 A : survolez {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6: survolez {
BORDURE-HAUT : #999999 1px solide
}
#ddimagetabs .current#sclink6 {
BORDURE-HAUT : #999999 1px solide
}
#sc6 A:lien {

}
#sc6 A : visité {

}
#sc6 A : survolez {

}
#ddimagetabs #sclink7 {
REMBOURRAGE-DROITE : 30px ; BORDURE-HAUT : #ff0000 1px solide ; REMBOURRAGE-GAUCHE : 30px ; MARGE-GAUCHE : 100px ;
}
#ddimagetabs #sclink7: survolez {
BORDURE-TOP : #ef7777 1px solide ; FOND : url(../images/cx_menu_hover_my.jpg) #cf1919 bas central sans répétition
}
#ddimagetabs .current#sclink7 {
BORDURE-TOP : #ef7777 1px solide ; FOND : url(../images/cx_menu_hover_my.jpg) #cf1919 bas central sans répétition
}
#sc7 A:lien {

}
#sc7 A:visité {

}
#sc7 A : survolez {

}
#tabcontentconteneur {
FOND : url(../images/sub_menu_bg.jpg) #fcfcfa répéter-x LARGEUR : 790px HAUTEUR : 27px ;
}
.tabcontent {
AFFICHAGE : aucun ; PADDING-TOP : 4px
}
.tabcontent A:lien {
PADDING-DROITE : 10px ; PADDING-LEFT : 10px ; FAMILLE DE POLICE : Verdana, Arial, Helvetica, sans empattement ; HAUTEUR : 18 px DÉCORATION : aucune ;
}
.tabcontent A: visité {
PADDING-DROITE : 10px ; PADDING-LEFT : 10px ; FAMILLE DE POLICE : Verdana, Arial, Helvetica, sans empattement ; HAUTEUR : 18 px DÉCORATION : aucune ;
}
.tabcontent A: survoler {
FOND : url(../images/cx_submenu_hover_grey.jpg) en bas au centre sans répétition ; #000000 ;
}
#active_submenu {
FOND : url(../images/cx_submenu_hover.jpg) #666666 bas central sans répétition ; COULEUR : #fff
}