Introduction
Le menu présenté se révèle être d’une simplicité de mise en oeuvre une fois qu’on a compris son fonctionnement. Il est basé sur les CSS (plus un script pour permettre à IE de se comporter presque comme les autres navigateurs).
Quelques mots sur le fonctionnement
Le menu fonctionne grâce aux listes imbriquées :
<ul>
<li>Niveau 1
<ul>
<li>Niveau 1.1</li>
<li>Niveau 1.2
<ul>
<li>Niveau 1.2.1</li>
<li>Niveau 1.2.2</li>
</ul>
</li>
<li>Niveau 1.3
<ul>
<li>Niveau 1.3.1</li>
</ul>
</li>
</ul>
</li>
<li>Niveau 2
<ul>
<li>Niveau 2.1</li>
<li>Niveau 2.2</li>
<li>Niveau 2.3
<ul>
<li>Niveau 2.3.1</li>
<li>Niveau 2.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>Ce qui donne sans mise en forme particulière :
- Niveau 1
- Niveau 1.1
- Niveau 1.2
- Niveau 1.2.1
- Niveau 1.2.2
- Niveau 1.3
- Niveau 1.3.1
- Niveau 2
- Niveau 2.1
- Niveau 2.2
- Niveau 2.3
- Niveau 2.3.1
- Niveau 2.3.2
Chaque niveau de liste sera un niveau du menu déroulant.
Préparation des pages du squelette :
Vous trouverez en bas de cet article le javascript à intégrer dans les pages. Personnellement je dépose le fichier dans un dossier « script » et je l’inclus avec le code suivant :
<script type="text/javascript" src="script/menuderoulant.js"></script>Il faut également ajouter ce code au niveau du body pour que le menu fonctionne sous IE :
<body onload="setHover('menulist')">menulist est à remplacer éventuellement par le nom de l’id que vous voulez utiliser.
Les boucles
Boucle de base
Voici la boucle « basique » permettant de générer le menu de tout le site :
<ul id="menulist">
<BOUCLE_menu(RUBRIQUES){racine}>
<li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_sousmenu><ul>
<BOUCLE_sousmenu(RUBRIQUES){id_parent}>
<li><a href="#URL_RUBRIQUE">#TITRE</a>
<BOUCLE_ssousmenu(boucle_sousmenu)></BOUCLE_ssousmenu>
</li>
</BOUCLE_sousmenu>
</ul></B_sousmenu>
</li>
</BOUCLE_menu>
</ul>Il suffit de nommer (id=« menulist ») et ensuite de styler la liste.
Les styles en provenance de l’exemple de Jep :
ul#menulist li ul{ display:none; }
ul#menulist li:hover>ul{ display:block; }
ul#menulist,
ul#menulist ul{
background:white;
border:1px solid black;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
font-size: 12px;
}
ul#menulist ul{
position:absolute;
top:-1px;
left:148px;
}
ul#menulist li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menulist a{
display:block;
width:100%;
color:#000000;
}
ul#menulist a:hover{
background: gray;
color: white;
}Exemple ici
Boucle détectant la présence de sous-menus
On va ajouter ici des éléments qui permettent d’identifier visuellement les rubriques en contenant d’autres en les mettant en italique et en ajoutant « >>> » derrière l’intitulé. Les styles en exemple derrière sont plus travaillés que l’exemple précédent et les boucles SPIP également (ajout de tri, suppression des numéros de titres, ...).
<ul id="menulist">
<BOUCLE_smenuspipr(RUBRIQUES){racine}{par num titre}><li<BOUCLE_smenr(RUBRIQUES){id_parent}{0,1}> class="smenu"</BOUCLE_smenr>><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen1r(RUBRIQUES){id_parent}{0,1}> >>></BOUCLE_smen1r></a>
<B_smenuspip><ul>
<BOUCLE_smenuspip(RUBRIQUES){id_parent}{par num titre}><li<BOUCLE_smen(RUBRIQUES){id_parent}{0,1}> class="smenu"</BOUCLE_smen>><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero)]<BOUCLE_smen1(RUBRIQUES){id_parent}{0,1}> >>></BOUCLE_smen1></a>
<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
</li></BOUCLE_smenuspip>
</ul></B_smenuspip>
</li></BOUCLE_smenuspipr>
</ul>La boucle RUBRIQUES couplée à id_parent avec une restriction de 1 permet de détecter des sous-rubriques et ici d’appliquer un style particulier à la ligne (class=« smenu ») et d’ajouter « >>> » dans l’intitulé du menu.
Des styles mettant un peu plus le menu en valeur et exploitant la détection de sous-menus :
ul#menulist li ul{ display:none; }
ul#menulist li:hover>ul{ display:block; }
ul#menulist {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #0F4D2A;
position: static;
left: 10px;
margin: 15px;
}
ul#menulist, ul#menulist ul {
list-style:none;
margin:0;
padding:0;
width:13em;
border: 1px solid;
border-top-color: #BABABA;
border-left-color: #BABABA;
border-bottom-color: #67B289;
border-right-color: #67B289;
background-color: #A7E6C4;
}
ul#menulist ul{
position:absolute;
top:-1px;
left:12.7em;
}
ul#menulist li{
position:relative;
margin:0px;
padding:0px;
_display:inline;
}
ul#menulist a{
display:block;
width:100%;
text-decoration: none;
text-indent: 1em;
width: 12.7em;
padding: 5px 0;
}
ul#menulist li:hover, ul#menulist li a:hover {
color: #FFFFFF;
background-color: #67B289;
}
ul#menulist li.smenu>a {
font-style: italic;
}
ul#menulist a {
color: #0F4D2A;
text-decoration: none;
}L’exemple situé ici est inspiré de ceci, mais il est plus joli et fonctionne uniquement sur les styles (pas d’ajout de « >>> »). La mise en forme ne se voit bien que sous des navigateurs récents (bien qu’il fonctionne sous IE sans avoir toutes ses subtilités visuelles). Sous les autres navigateurs, une flèche tourne lorsqu’on survole les éléments du menu.
J’ai préféré indiquer ci-dessus un exemple fonctionnant de manière vraiment similaire sous IE et les autres navigateurs.
Je trouve que dans cet exemple, l’utilisation de ce menu prend toute son ampleur.
Menu du secteur, menu de la rubrique courante, etc.
Il est très simple d’implémenter ce menu en exploitant le contexte de la page et en n’affichant que le secteur ou la rubrique courante. Il suffit de faire une boucle affichant le secteur courant ou la rubrique courante sous forme de liste.
Les exemples donnés ci-dessous correspondent à des boucles basiques sans tri et avec les styles basiques donnés au premier exemple.
Exemple de la rubrique courante
<ul id="menulist"><BOUCLE_menuspiprub(RUBRIQUES){id_rubrique}>
<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
<BOUCLE_smenuspiprub(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_ssmenurub><ul>
<BOUCLE_ssmenurub(boucle_smenuspiprub)></BOUCLE_ssmenurub>
</ul></B_ssmenurubt>
</li></BOUCLE_smenuspiprub>
</ul>Exemple du secteur courant fonctionnant aussi bien dans une page affichant secteur, rubrique, article, breve, ...
Ce code peut être externalisé dans un fichier qu’on inclut en passant id_rubrique.
<BOUCLE_englob(RUBRIQUES){id_rubrique}>
<B_menuspip>
<ul id="menulist"><BOUCLE_menuspip(HIERARCHIE){id_rubrique}{0,1}>
<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
<BOUCLE_smenuspip(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_ssmenu><ul>
<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
</ul></B_ssmenu>
</li></BOUCLE_smenuspip>
</BOUCLE_menuspip>
</ul>
</B_menuspip>
<ul id="menulist"><BOUCLE_menuspipsect(RUBRIQUES){id_rubrique}>
<li><b><a href="#URL_RUBRIQUE">#TITRE</a></b></li>
<BOUCLE_smenuspipsect(RUBRIQUES){id_parent}><li><a href="#URL_RUBRIQUE">#TITRE</a>
<B_ssmenusect><ul>
<BOUCLE_ssmenusect(boucle_smenuspipsect)></BOUCLE_ssmenusect>
</ul></B_ssmenusect>
</li></BOUCLE_smenuspipsect>
</ul>
<//B_menuspip>
</BOUCLE_englob>Il est possible d’inclure les articles aussi, les brèves, etc... Tout dépend après de vos envies.
Les fichiers à télécharger
Le fichier javascript :
Un ensemble de fichiers prêts à l’emploi qu’il suffit d’inclure dans les squelettes par la commande <INCLURE(spip-ex-md-menu.php3)> (ou un autre nom si vous renommez les fichiers) :
- Un couple php3/html de type spip [1]
- Un fichier css soit à inclure dans l’entête de vos squelettes, soit à copier/coller dans votre propre CSS.
- Ne pas oublier le javascript et le code à préciser au niveau du body.
- Il est présenté ici
A noter que cet exemple supprime les numéros et trie par numéro.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
