Un menu déroulant pour Sarka-SPIP

samedi 11 février 2006
par  _Sylvain_
popularité : 4%

A propos

- compatiblité

  • version de SPIP : toute version
  • version de Sarka-SPIP : 1.1.2

- Fichiers ou dossiers à créer

  • /scripts/menuderoulant.js
  • /puces/arrow.gif
  • /puces/arrowb.gif

- Fichiers ou dossiers à modifier

  • style.css
  • header.html
  • bloc-gauche.html
  • + fichiers html principaux

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);
   }
 }
}
Zip - 404 octets
menuderoulant.js

- 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 :

GIF - 49 octets
arrow.gif
GIF - 55 octets
arrowb.gif

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 :

Zip - 32.2 ko
Fichiers modifiés pour Sarka-c16 [menu déroulant]
Cette archive contient les fichiers du squelette Sarka-SPIP c-16 modifiés pour l’intégration du menu déroulant.

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 :

Zip - 61.6 ko
Squelette Sarka-c16 [menu déroulant]
Cette archive contient l’ensemble des fichiers nécessaires à l’installation intégrale du squelette Sarka-SPIP c-16 sur votre site, avec menu déroulant.

[1pour la version 1.1.2-c13... a priori

[2encore et toujours pour la version 1.1.2-c13... si tout va bien ;-)


Documents joints

menuderoulant.js
Squelette Sarka-c16 [menu déroulant]
Fichiers modifiés pour Sarka-c16 [menu (...)

Portfolio

arrow.gif arrowb.gif

Commentaires  Forum fermé

Logo de marc
Un menu déroulant pour Sarka-SPIP
samedi 11 février 2006 à 09h07 - par  marc

J’ai pu installer le menu déroulant en suivant les indications de Sylvain .
J’ai vraiment besoin de ce type de menu car j’ai une rubrique qui comporte un grand nombre de sous rubriques (et qui va en augmentant !)

Problèmes ...

Sous Firefox c’est presque parfait si ce n’est que pour accéder aux dernières sous rubriques déroulées il faut utiliser la flèche bas du clavier,

mais surtout le menu ne fonctionne pas sous IE6 Windows (j’ai vérifié sur un autre site référencé dans les utilisateurs ... idem)

je ne suis pas certain de trouver moi même une solution, pourtant j’ai vu pas mal de squelettes qui utilisent ce type de menu (par exemple le menu de Spip Contrib ou Epona et d’autres encore)

Bien amicalement - marc

Logo de marc
dimanche 12 février 2006 à 19h28 - par  _Sylvain_

Bon, ça marche enfin tip top ? C’est morfidable !

Ton problème de sommaire est en effet assez étrange... tu devrais vérifier ton fichier index.php3 (à la racine). Il doit contenir la ligne :

<?php include ("sommaire.php3"); ?>

Logo de _Sylvain_
dimanche 12 février 2006 à 17h55 - par  marc

Super ! je viens de faire les modifs et tout baigne !!!

Pour les classes du CSS ça a été vite fait par contre pour la balise j’ai mis un moment à comprendre... et d’ailleurs je n’ai pas tout compris...

En fait voilà ce qui se passe j’ai deux fois le fichier sommaire.html : une fois dans le répertoire inclusions et une fois à la racine du squelette...

Normalement celui du repertoire inclusions est de trop mais si je le vire ... tout part en vrille ???

Bon l’essentiel c’est quand même que tout fonctionne bien.

Merci Sylvain !

Amitiés - Marc

Logo de marc
dimanche 12 février 2006 à 16h23 - par  _Sylvain_

Salut Marc,

J’ai mis l’article à jour : tu peux maintenant télécharger les fichiers modifiés et les charger sur ton site.

En regardant ton code, je vois que tu as oublié de modifier la balise body. Il faut changer :

<body dir="ltr">

en :

<body  dir="#LANG_DIR" onload="setHover()">

Par ailleurs, tu as oublié de supprimer les anciennes classes du menu dans le fichier style.css. C’est pour cette raison que ton arborescence fait une drôle de tête, et que la police est si petite.

Compte-tenu du nombre de sous-rubriques dans ton secteur les bateau, je pense que ce menu est peu adapté à ton site. Un truc "à la Pyrat" conviendrait mieux... j’y travaille :-).

Amitiés.

Un menu déroulant pour Sarka-SPIP
mercredi 8 février 2006 à 17h37 - par  rosebud

bonjour

apparemment les logos des rubriques aussi bien sous ie que firefox ne s’affichent pas. j’ai essayé d’inserer en logo de rubrique une image.jpg de 90x103, je l’ai bien téléchargé, elle se trouve dans /img et elle a été renommée.

dans l’interface d’administration je la vois bien mais pas dans l’interface publique même en vidant le cache.

à plus

mercredi 8 février 2006 à 21h05 - par  rosebud

bonsoir

hello ça marche j’avais dû faire une erreur.

à plus

mercredi 8 février 2006 à 19h17 - par  rosebud

rebonjour

j’ai peut etre parlé trop vite pour les logos de rubrique qui ne s’affichent pas

je reteste en partant d’une version propre du quelette 1.1.2 c16 + menu deroulant et je reposte pour confirmation ou infirmation ; désolé

à plus

Un menu déroulant pour Sarka-SPIP
mercredi 8 février 2006 à 12h07 - par  rosebud

bonjour

j’ai testé en local sous ie et firefox le menu déroulant avec le squelette 1.1.2c16 et spip 1.8.2g tout à l’air de fonctionner parfaitement.

pour l’instant,j’ai simplement remarqué qu’une des puces (la puce arrowb) s’affiche sous firefox mais pas sous ie.

bravo et encore merci

Logo de _Sylvain_
Test de la procédure... OK !!!
mardi 7 février 2006 à 20h39 - par  _Sylvain_

Je viens de tester en local la procédure indiquée dans cet article pour installer le menu déroulant : tout semble fonctionner, sans problème, avec IE 6 et Firefox sous Windows. Il faut juste prendre garde à ne pas supprimer trop de code dans les fichiers html et css : ainsi, le "chapitre" nommé bloc de navigation 1 commence par le commentaire :

/* bloc de navigation 1 -> arborescence du site */

et s’achève juste avant le commentaire :

/* bloc de navigation 2 --> contact + admin + formulaire + s'inscrire */

J’attend des retours de la part des utilisateurs qui ont tenté d’installer ce menu, leur expérience peut être enrichissante.

Bon codage.

Un menu déroulant pour Sarka-SPIP
mardi 7 février 2006 à 14h35 - par  Gaston R.

Salut

est-ce que le menu déroulant est installé sur le site : http://sarka-spip.com/
car le menu qui s’affiche pour moi n’est pas déroulant
j’utilse windows 98 et IE 6

Merci

Logo de Gaston R.
mardi 7 février 2006 à 20h41 - par  _Sylvain_

Non : je l’ai désactivé à l’occasion de l’intégration des deux derniers correctifs, c14 et c15, qui vont bientôt être documentés.

J’essaie de le réactiver le plus vite possible (ce soir ou demain).

Logo de remi76
Un menu déroulant pour Sarka-SPIP
lundi 6 février 2006 à 21h40 - par  remi76

C’est une super bonne idée les menus déroulants, mais malheureusement, je suis dans la situation suivante : (je ne connais pas grand chose en programmation) j’ai suivi les consignes au plus juste ( s’il est facile de trouver le début d’un chapitre, je ne suis pas sur d’avoir trouvé la "bonne" fin) et je me retrouve avec :

lundi 6 février 2006
<:articles_recents :>
lundi 6 février 2006
<:par_auteur :>

<:lire_suite_article :>
— pour rajouter des trucs — à la CSSZengarden —>

au lieu du bandeau et quelques rubriques etc....

Comme j’avais fait une sauvegarde avant (ouf !) je vais le restaurer (mon site) mais je pense que je n’ai pas déterminé avec suffisament de précision les modif à faire : j’ai dû enlever trop de code dans un ou plusieurs fichiers ???)

je vais peut etre attendre le patch pour les menus déroulants.... mais quand est-ce que tu pense pouvoir le finaliser ??
sinon, je retenterais ma chance !
merci quand meme pour la bonne idée.

Logo de remi76
lundi 6 février 2006 à 21h51 - par  _Sylvain_

Ouïlle... j’espère que je n’ai pas fait d’erreur en documentant ce fichu menu : j’ai rédigé cet article tardivement et rapidement (faute de temps)... Je le verifierai attentivement demain.

Je me donne une semaine pour publier un patch, le temps de corriger quelques bugs (indépendant du menu)... avec l’aide de smellup, j’ai trouvé un moyen d’imposer aux cadres de rubriques une hauteur au moins égale à la hauteur du logo. C’était LE problème majeur de sarka-SPIP, à ma connaissance.

Désolé pour les bugs du menu :(((

Un menu déroulant pour Sarka-SPIP
jeudi 2 février 2006 à 20h44 - par  MSLP

Bonsoir

un seul mot "BRAVO"
un tel menu manquant à sarka-spip

Merci Sylvain

mardi 27 mars 2007 à 17h41 - par  olive

merci pour le tuyau...
Le problème c que j’ai déjà teste plusieurs menu deroulant horizontale dont celui de alsacreation. Il ne propose pas plusieurs niveaux comme celui de sarka. Mais bon je vais trouver enfin j’espere...
Je te remercie

Logo de olive
mardi 27 mars 2007 à 13h23 - par  _Eric_

Salut,

Non c’est pas simple... Je ne suis pas sur que la meilleure façon soit de repartir de celui qui est fourni en standard avec Sarka. Sur des sites comme Alsacréations tu dois trouver des exemples commentés (cf article ici).

Voila

mardi 27 mars 2007 à 01h39 - par  olive

Comment modifier le menu deroulant vertical existant pour le rendre horizontal...
Voila une heure que je me prend la tête. Je me demande si c’est possible ???
surement ya pas de raison

Logo de olive
mardi 7 février 2006 à 08h28 - par  marsu15

non, c’est bon, en plus j’ai pu amméliorer le css. Le problème c’est que maintenant le bloc avec la date des 5 derniers articles de la page d’accueil, s’affiche au milieu du résumé de l’aticle (http://www.serie-newportbeach.new.fr/)

Logo de marsu15
lundi 6 février 2006 à 21h56 - par  _Sylvain_

Salut Marsu,

Sincèrement, je suis désolé pour ton site. Tu devrais sauvegarder tes modifs perso avant d’ajouter des trucs au squelette. Par ailleurs, il est possible de tester un site en local, avec easyphp par exemple, avant publication en ligne.

J’espère que tu ne t’es pas trop arraché de cheveux sur ce menu... je chercherai l’erreur demain.

Bonne soirée.

Logo de _Sylvain_
lundi 6 février 2006 à 17h45 - par  marsu15

J’ai pas réussi ! En plus, sa a complètement foiré mon site ! J’ai du remodifier le css entièrement ! refaire toutes les modifs approtés à sarka...

Logo de marsu15
vendredi 3 février 2006 à 22h06 - par  _Sylvain_

Bonsoir,

Pour mettre du code dans un message :
< code >mon code< /code > (sans les espaces)

 ;-)

Pour la galère... désolé :(

Je n’ai pas encore achevé la documentation de cette évolution. Encore un peu de patience : ce week-end, je documente intégralement le menu déroulant, promis.

Logo de _Sylvain_
vendredi 3 février 2006 à 18h36 - par  lyasis

Bonjour,

Je tente depuis hier diverses solutions pour intégrer ce menu déroulant en vain pour le faire fonctionner correctement !

J’ai dû râter quelquechose.

En l’état actuel des choses, je pense que cela vient de là :

Désolé, je ne sais quelle est l’option pour mettre du code dans un message !

le menu déroulant fonctionne mais quand on survole une des "cases", une barre apparaît sur la droite alors qu’il ne devrait rien y avoir si aucune rubrique n’existe !
Pire mais je n’avais pas vu car linuxien, j’ai vu aujourd’hui qu’avec IE sous win, ce n’est pas une barre qui apparaît lors du survol mais une demi case coupée dans le sens de la longueur donc bien plus inesthétique .
Si vous avez une piste, merci d’avance !
Arnaud