La réalisation de ce volet de menu vertical passe par l’installation préalable du plugin "SIDR" (pour SPIP 2.1, 3.0 et 3.1) qui apporte essentiellement le script d’animation du volet (merci à RealET, auteur de cette excellente contribution).
Une fois le plugin installé, il faut l’activer en ajoutant la ligne
define("_SIDR_PERSO", true);
aux commandes php du fichier "mes_options.php" dans le dossier "CONFIG" du site SPIP.
Ensuite il faut placer le code d’appel du script d’animation quelque part dans le code html du site : dans mon cas, puisque toutes les pages de ce site "fat78.net" commencent par la même en-tête définie dans le fichier "inc-entete.html", c’est ici que j’ai choisi de placer le code d’appel, le bouton ≡ d’animation et la liste des items du menu vertical (de préférence la même que celle du menu normal de navigation, mais pas forcement) :
— code d’appel du script d’animation :
<script src="plugins/sidr/javascript/jquery.sidr.js" type="text/javascript"></script>
<script type="text/javascript">/* <![CDATA[ */
jQuery(document).ready(function() {
jQuery("#responsive-menu-button").sidr({
name: "sidr-main",
source: "#menuhaut"
});
});
/* ]]> */</script>— mise en place du bouton d’animation ("bouton.jpg" de 32x32 pixels) en haut à gauche de la page html :
<div id="mobile-header" style="float:left; top:1px; left:1px;width:39px;" >
<a id="responsive-menu-button" href="sidr-main"><span><img src="bouton.jpg" /></span></a>
</div>— Pour mettre en place un bouton qui reste dans le coin haut-gauche, au-dessus de l’affichage html, remplacer le style float:left; par z-index:9999;position:fixed;
— liste des items du menu vertical :
<div id="menuhaut" style="display:none;align:left;">
<ul style="align:left;">
<li style="margin:1em;text-align:left;align:left;">
<BOUCLE_rubres(RUBRIQUES) {racine} {par num titre, titre}>
<a href="#URL_RUBRIQUE" style="text-align:left;align:left;">
≡ <strong><big>[(#TITRE|supprimer_numero)]</big></strong>
</a>
</BOUCLE_rubres>
</li>
</ul>
</div>Comment (je pense que) ça fonctionne ?
l’appel du script d’animation (qui doit être exécuté en premier) crée une animation avec
— identifiant "#responsive-menu-button"
— nom d’appel "sidr-main"
— source des items d’identifiant "#menuhaut" à utiliser dans le menu vertical
le bouton ≡ utilise l’identifiant id="responsive-menu-button" et contient un lien vers l’adresse "sidr-main" : en cliquant dessus on lance bien le script qui ouvre/ferme le volet vertical.
la liste des items du menu (les rubrique à la racine du site SPIP) étant dans un conteneur (div) identifiée par id="menuhaut" est bien récupérée par le script du volet. Noter le style "display:none" qui permet de ne pas afficher cette liste parmi les éléments html du fichier inc-entete.html
Cette liste s’affiche par défaut avec les textes centrés : pour modifier cet alignement il faut ajouter dans les styles du site .sidr ul li {text-align: left;} ou .sidr ul li {text-align: right;} pour obtenir les alignements à gauche ou à droite respectivement.
Tout ceci fonctionne, il ne reste plus qu’à ajouter la responsivité dans le fichier css qui définit les styles du site (mon menu de navigation normal est dans un conteneur d’identifiant "id=menu") :
@media screen and (max-width:800px)
{
#menu { display: none; }
#mobile-header { display: block; }
}
@media screen and (min-width:801px)
{
#menu { display: block; }
#mobile-header { display: none; }
}(ne pas oublier d’enlever les éventuels "display:block" dans les lignes de code du menu normal pour ne pas contrarier l’effet du "display:none")
Donc ...
sur des écrans jusqu’à 800 pixels de large (smartphones, tablettes en position verticale) le menu normal est masqué et le bouton ≡ est affiché en haut à gauche permettant d’activer le volet du menu vertical
sur écrans au-delà de 800 pixels de large le menu normal est affiché et le bouton ≡ est masqué
Les réglages du plugin "SIDR" permettent aussi de choisir entre un volet à fond clair ou à fond sombre : c’est très bien !
RSS 2.0