Objectif
Lorsqu’un site comporte de nombreuses rubriques et sous-rubriques, le menu standard de Sarka-SPIP peut se révéler inadapté. Suite à de nombreuses demandes, je propose un menu déroulant fondé sur les contributions de Bony & jep et de Miss Mopi. Vous pouvez observer le résultat, temporairement, sur ce site.
Mise en oeuvre
Pour comprendre le fonctionnement de ce menu, je recommande la lecture des contributions pré-citées. Le principe du menu déroulant proposé dans cet article y est suffisament expliqué pour que nous nous contentions d’indications sommaires dans cet article.
– Création de menuderoulant.js
Dans le dossier squelette, créer un répertoire /scripts pour y créer le fichier menuderoulant.js contenant le code suivant :
function hover(obj){
if(document.all){
UL = obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu = UL[0].style;
if(sousMenu .display == 'none' || sousMenu.display == ''){
sousMenu.display = 'block';
}else{
sousMenu.display = 'none';
}
}
}
}
function setHover(){
LI = document.getElementById('nav1').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}
}
– Modification du fichier header.html
Pour inclure le fichier menuderoulant.js dans l’ensemble des pages du squelette, il faut ajouter la ligne suivante dans le fichier header.html (dans le répertoire /squelettes/inclusions) :
<script type="text/javascript" src="#DOSSIER_SQUELETTE/../scripts/menuderoulant.js"></script>
– Modification des fichiers html principaux
Pour que le code javascript ainsi introduit dans nos pages de squelette s’applique au menu, il faut modifier la balise body en y ajoutant onload="setHover()". La fonction déclarée dans notre fichier javascript est ainsi exécutée.
La balise body doit donc être modifiée pour devenir :
<body dir="#LANG_DIR" onload="setHover()">
dans les fichiers :
- article.html
- auteur.html
- breve.html
- forum-news.html
- forum.html
- mot.html
- plan.html
- recherche.html
- rubrique.html
- site.html
- sommaire.html
– Modification du fichier style.css
Le fichier style.css doit être modifié.
Pour réduire la largeur de la colonne de gauche, afin de profiter de la compacité de ce menu pour augmenter la largeur de la colonne centrale, les classes gauche et centre peuvent être modifiées comme suit :
.gauche {
/*colonne de gauche*/
border: 0px;
width: 150px;
float: left;
font-family: Arial,Verdana,Helvetica,sans-serif;
}
.centre {
/*colonne centrale*/
border: 0px;
margin-left: 150px; /*Sarka-SPIP 1.8.2*/
margin-right: 170px;
font-family: Arial,Verdana,Helvetica,sans-serif;
}Les classes définies dans le chapitre /* bloc de navigation 1 —> arborescence du site */ (à partir de la ligne 304 [1]) doivent être remplacées par les attributs suivants :
.nav1 {
/*bloc contenant la hiérarchie*/
width: 100%;
padding:0px;
font-size: 11px;
}
ul.menulist li ul{ display:none; }
ul.menulist li:hover>ul{ display:block; }
ul.menulist,
ul.menulist ul{
background:#6262A4;
border:1px solid #FFFFFF;
border-bottom: 0px;
list-style:none;
margin:0px;
padding:0px;
width:148px;
_width:150px;
}
ul.menulist ul{
position:absolute;
top:-1px;
left:148px;
}
ul.menulist li{
position:relative;
margin:0px;
padding:0px;
border-bottom: 1px solid #FFFFFF;
}
ul.menulist a{
display:block;
_width: 100%;
color:#FFFFFF;
text-decoration:none;
padding: 5px;
}
ul.menulist a:hover{
background:#323284;
color:#FFFFFF;
}
ul.menulist li.smenu {
background-image: url(../puces/arrow.gif) !important;
background-position: 140px;
background-repeat: no-repeat;
}
ul.menulist li.smenu:hover, ul.menulist li.smenu>a:hover {
background-image: url(../puces/arrowb.gif) !important;
background-position: 137px;
background-repeat: no-repeat;
}– Modification du fichier bloc-gauche.html
Pour tenir compte de la réation de ces nouvelles classes, le fichier bloc-gauche.html doit être modifié à son tour. Les lignes du chapitre hiérarchie des rubriques sur 3 niveaux (à partir de la ligne 5 [2]) doivent être remplacées par le code suivant :
<!-- hiérarchie des rubriques sur 3 niveaux -->
<div id="nav1" class="nav1">
<ul class="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)]</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)]</a>
<BOUCLE_ssmenu(boucle_smenuspip)></BOUCLE_ssmenu>
</li></BOUCLE_smenuspip>
</ul></B_smenuspip>
</li></BOUCLE_smenuspipr>
</ul>
</div>– Chargement des puces
Cerise sur le gateau, les petites puces affichées à droite des titres de rubriques pouvant être déployées... les fichiers arrow.gif et arrowb.gif doivent être chargés dans le répertoire squelettes/puces. Vous pouvez les télécharger :
Si la version 1.1.2 c-16 de sarka-SPIP est installée, vous pouvez télécharger l’archive suivant et mettre à jour votre site avec les fichiers qu’elle contient :
Si vous souhaitez installer intégralement la version 1.1.2 c-16 du squelette avec le menu déroulant, chargez les fichiers contenus dans l’archive suivante à la racine de votre site :
Commentaires Forum fermé