J'ai planché sur des menus horizontaux avec une liste en sous-menu fixe et une déroulée final sur des contenus, maquette visible ici…
J'avais déjà un premier menu horizontal, il me fallait ajouter un second niveau une fois sur la page du premier niveau avec la possibilité de lister des pages de contenu au survol du second niveau.
Tous les menus comprennent des états actifs avec design CSS différents.
Le menu de second niveau n'apparaît que pour les pages ayant des sous-dossiers sinon il disparaît.
Cet exemple est dédié aux contenus (le site n'est pas une boutique) mais ça peut ce modifier pour du produit/rubrique.
Les 3 boucles de menus :
Premier niveau - Placé dans le header du template - fichier entete.html
<div id="header_menu">
<ul>
<li><a href="#URLSOMMAIRE">::accueil::</a></li>
<THELIA_MENU_DOSSIER type="DOSSIER" parent="0" classement="manuel" num="5">
<li><a href="#URL" #FILTRE_egalite(#DOSSIER_ID||#ID||class="selection")#FILTRE_egalite(#DOSSIER_PARENT||#ID||class="selection")>#TITRE</a>
<!-- <T_BLOC_SOUS_MENU>
<ul>
<THELIA_BLOC_SOUS_MENU type="DOSSIER" parent="#ID" niveau="1">
<li><a href="#URL" #FILTRE_egalite(#DOSSIER_ID||#ID||class="selection")>#TITRE</a></li>
</THELIA_BLOC_SOUS_MENU>
</ul>
</T_BLOC_SOUS_MENU>
<//T_BLOC_SOUS_MENU> -->
</li>
</THELIA_MENU_DOSSIER>
</ul>
</div>
Second et troisième niveaux - Toujours dans le header du template - fichier entete.html
<T_SOUS_MENU>
<div class="sous_menu">
<ul>
<THELIA_SOUS_MENU type="DOSSIER" parent="#DOSSIER_ID" classement="manuel" num="6">
<li><a href="#URL">#TITRE</a>
<T_DEROUL_MENU>
<ul>
<THELIA_DEROUL_MENU type="CONTENU" dossier="#ID" classement="manuel">
<li><a href="#URL">#TITRE</a></li>
</THELIA_DEROUL_MENU>
</ul>
</T_DEROUL_MENU>
<//T_DEROUL_MENU>
</li>
</THELIA_SOUS_MENU>
</ul>
</div>
</T_SOUS_MENU>
<TEST_NIVEAU variable="#DOSSIER_PARENT" test="superieur" valeur="0">
<div class="sous_menu">
<ul>
<THELIA_SOUS_MENU type="DOSSIER" parent="#DOSSIER_PARENT" classement="manuel">
<li><a href="#URL" #FILTRE_egalite(#DOSSIER_ID||#ID||class="selection1")>#TITRE</a>
<T_DEROUL_MENU>
<ul>
<THELIA_DEROUL_MENU type="CONTENU" dossier="#ID" classement="manuel">
<li><a href="#URL"#FILTRE_egalite(#CONTENU_ID||#ID||class="selection2")>#TITRE</a></li>
</THELIA_DEROUL_MENU>
</ul>
</T_DEROUL_MENU>
<//T_DEROUL_MENU>
</li>
</THELIA_SOUS_MENU>
</ul>
</div>
</TEST_NIVEAU>
<//TEST_NIVEAU>
<//T_SOUS_MENU>
Le test en alternatif me sert à récupérer le menu lorsque l'on est en navigation de 3e niveau, le menu de second niveau est alors affiché avec l'état actif du dossier parent.
CSS des second et troisième niveaux :
/* sous menus niveaux 2 et 3 */
.sous_menu {
display: block;
height: 30px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:0.9em;
background-color: #FFF;
position: relative;
z-index: 50;
}
.sous_menu ul {
margin:0px;
padding:0px;
list-style-type:none;
text-align:center;
}
.sous_menu li {
float:left;
margin-left: 10px;
margin-right: 5px;
position: relative;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
.sous_menu li a {
display:block;
font-weight:bold;
color:#4a83ce;
text-decoration:none;
padding-top: 6px;
padding-bottom: 6px;
margin: 0px;
}
.sous_menu li a:hover {
color: #083f88;
}
.sous_menu .selection1 {
color: #083f88;
padding-top: 9px;
padding-bottom: 2px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #083f88;
}
.sous_menu .selection2 {
color: #FFF;
background-color: #083f88;
}
.sous_menu ul li ul {
display:none;
position: absolute;
z-index: 30;
left: 0px;
top: 28px;
background-color: #FFF;
text-align: left;
margin: 0px;
width: 180px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #083f88;
border-bottom-color: #083f88;
border-left-color: #083f88;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #083f88;
padding: 0px;
}
.sous_menu ul li:hover ul {
display:block;
}
.sous_menu ul li ul li {
margin: 0px;
font-size: 0.9em;
line-height:125%;
padding: 0px;
height: 100%;
}
.sous_menu ul li ul li a {
display: block;
padding-top: 5px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 8px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.sous_menu ul li ul li a:hover {
background-color: #d6dfec;
}
.sous_menu li:hover ul li {
float:none;
}
A adapter selon vos besoins.
Le menu déroulant est pur CSS mais du coup on perd en accessibilité (display:none), j'ai donc opté pour une reprise des liens en signature du site pour les moteurs qui tombent sur la page d'accueil et les visiteurs.
Marche très bien avec IE7 et 8 mais il faut ajouter dans le head :
<!-- styles alternatifs pour explorer -->
<!--[if !IE]>
<style type="text/CSS">.sous_menu li ul {position:absolute;}</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/CSS">.sous_menu li ul {position:absolute;}</style>
<![endif]-->
Si ça peut aider…
Last edited by momo-fr (19-10-2011 18:13:34)