SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 110 visiteurs en ce moment

Accueil > Squelettes > Squelettes généralistes > SoyezCreateurs > Sidr : Menu de côté Responsive > Sidr : Menu de côté Responsive

Sidr : Menu de côté Responsive

30 septembre 2015 – par RealET – 26 commentaires

13 votes

Ce plugin permet de cibler un menu pour le remplacer par un bouton d’appel à ce même menu affiché verticalement à gauche du site.

Présentation

Il s’agit de l’implémentation en plugin SPIP d’un plugin de jQuery : Sidr. Cette page contient la documentation du plugin jQuery et le menu placé en haut est une démonstration de l’effet.

Usage

Le plugin devrait [1] fonctionner à l’installation, après configuration du sélecteur à cibler pour la transformation (par défaut #menu).

Ce menu a été intégré à SoyezCréateurs avec la révision 73130.

Principe d’intégration dans un squelette personnalisé

Il y a 4 éléments à modifier dans vos squelettes :

  • un define dans mes_options.php
  • un div qui recevra le bouton rajouté par le script
  • un script pour dire quelle portion de votre HTML doit être transformée
  • une CSS pour masquer votre menu original quand le menu responsive est affiché

Define

À placer dans config/mes_options.php (à créer au besoin)

  1. <?php
  2. define("_SIDR_PERSO", true);

Télécharger

Permet de dire au plugin de ne rien faire automatiquement.

Div à rajouter

Par exemple juste avant le menu concerné.

  1. <div id="mobile-header">
  2.   <a id="responsive-menu-button" href="#sidr-main"><span>Menu de navigation</span></a>
  3. </div>

Télécharger

Script

  1. <script src="#CHEMIN{javascript/jquery.sidr.js}" type="text/javascript"></script>
  2. <script type="text/javascript">/* <![(#EVAL{chr(91)})]CDATA[(#EVAL{chr(91)})] */
  3. jQuery(document).ready(function() {
  4.         jQuery("#responsive-menu-button").sidr({
  5.         name: "sidr-main",
  6.         source: "#menuhaut"
  7.         });
  8. });
  9. /* [(#EVAL{chr(93)})][(#EVAL{chr(93)})]> */</script>

Télécharger

Style

  1. @media screen and (max-width:960px) {
  2.   [(#PLUGIN{SIDR}|oui)#menuhaut { display: none; }]
  3. }

Télécharger

Pour masquer le menu original

Exemple

Un site pour avoir bien chaud.

Menu en écran large
Bouton de menu en mode mobile
Menu déplié en mode mobile

Voir en ligne : http://plugins.spip.net/sidr

P.-S.

L’effet peut encore être amélioré comme indiqué dans Implementing Off-Canvas Navigation For A Responsive Website

Notes

[1Ne l’utilisant pas dans ce contexte, je n’ai pas vérifié.

Dernière modification de cette page le 29 septembre 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 27 mars à 11:47, par Yeye En réponse à : Sidr : Menu de côté Responsive

    Bonjour,

    Je débute et je ne sais pas où ajouter le script et le css.
    J’ai essayé après le div à ajouter juste avant le div du menu existant mais rien. (vidage du cache inclus)

    • Le 8 octobre à 22:49, par LaLy En réponse à : Sidr : Menu de côté Responsive

      Le div, tu l’ajoutes dans ton header (juste après le <div class="clearfix header">).

      Le script au dessus de la définition de ton menu.

      Le CSS, dans ton perso.css
      (vérifies bien que le nom de ton menu est bien #menuhaut, sinon remplace le.)
      exemple mon menu est dans le .aside, et c’est la seule chose dans le aside, j’ai mis à la place

      1. .aside { display: none; }
      2. .wrapper {width: 100%;}

      Télécharger

    Répondre à ce message

  • Le 27 février à 21:55, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

    Bonjour,

    2 requêtes d’évolution sur ce plugin :

    1. Il y a en configuration le choix entre 2 habillages « Sombre » et « Clair » qui imposent des couleurs, polices, hauteurs.
      Je propose un autre modèle d’habillage "Vierge" qui ne contient aucune couleur ou autre mise en forme dans la feuille de style, juste le minimum de largeur du volet pour le déployer/masquer. Car certains styles sont difficiles à surcharger.
    2. Le menu cible qui passe en sidr est obtenu par duplication, et toutes les classes sont préfixées par sidr-class-, les id par sidr-id-. Que les id soient préfixés, d’accord car ils doivent être uniques, mais préfixer les classes est parfois gênant : si l’on veut harmoniser la charte graphique avec le menu d’origine, il faut :
      • ou dupliquer tous les styles avec préfixe sidr-,
      • ou supprimer ces préfixes par jquery (ce que je fais pour l’instant).
        Serait-il donc possible que le préfixage des classes ne soit effectué que sur activation d’une option du plugin ?

    A moins que quelqu’un très à l’aise sur le développement de ce plugin ne puisse le faire rapidement, je creuse pour faire les modifs et créer une 1.5.0.

    Merci

    • Le 27 février à 22:57, par RealET En réponse à : Sidr : Menu de côté Responsive

      Bonjour,

      Le comportement CSS et JS de ce plugin ne sont pas de mon fait, mais juste fournis par le script original.

      Donc :

      1. Tu peux faire les ajouts que tu souhaites
      2. Il ne faut pas que ça modifie le comportement par défaut du plugin
      3. Ce serait une bonne chose que tes ajouts se paramètres via la CFG du plugin

      Merci

    • Le 27 février à 23:08, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

      OK.
      Donc j’ai
      -  créé un fichier jquery.sidr.virgin.css,
      -  modifié formulaires/configurer_sidr.htm en ajoutant en ligne 29 :

      <option value="virgin"[(#ENV{skin}|=={virgin}|oui)selected="selected"]><:sidr:label_choix_skin_virgin:></option>

      Le css contiendrait seulement :

      .sidr {
       display: block;
       position: fixed;
       top: 0;
       height: 100%;
       z-index: 999999;
       width: 260px;
       overflow-x: hidden;
       overflow-y: auto;
      /*
       j'hésite à laisser ces 2 lignes au minimum
       background: #333;
       color: #fff;
       */
      }
      .sidr.right {
       left: auto;
       right: -260px;
      }
      .sidr.left {
       left: -260px;
       right: auto;
      }
      .sidr ul {
       display: block;
      }
      .sidr ul li {
       display: block;
      }

      Il reste à créer la chaine de langue pour l’habillage.

    • Le 28 février à 13:36, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

      Pour éviter le préfixage, il y a une option renaming de la lib Sidr qui évite le renommage des classes ET des IDs.
      Cette option peut être implémentée dans la config du plugin.

      Le problème est que cette option à false évite le renommage aussi des IDs, qui passent alors en doublon. C’est un pb de fonctionnalité de la lib Sidr que je discute en ce moment.

    Répondre à ce message

  • Le 10 janvier à 14:43, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

    Il semblerait que si l’on configure « Désignez le menu source à rendre responsive. (Sélecteur CSS) » avec un id posé directement sur le <ul> du menu, le <ul> ne soit pas repris dans le menu sidr, en résultant des <li> directement dans un <div>.

    Si l’on configure le sélecteur avec un id sur un <div> qui englobe le <ul>, ça fonctionne correctement.

    Répondre à ce message

  • Le 10 janvier à 14:36, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

    Bonjour,

    Il semblerait que si l’on configure « Désignez le menu source à rendre responsive. (Sélecteur CSS) » avec un id posé directement sur le

      du menu, le
        ne soit pas repris dans le menu sidr, en résultant des
      • directement dans un
        .

        Si l’on configure le sélecteur avec un id sur un

        qui englobe le
          , ça fonctionne correctement.

    Répondre à ce message

  • Le 1er octobre 2015 à 00:24, par DD En réponse à : Sidr : Menu de côté Responsive

    Bonjour,

    Est-ce que ce plugin fonctionne sans soyez créateur ?
    J’ai bien le lien « menu » qui fait apparaitre au clic le menu latéral mais pas le hamburger.

    merci
    dd

    • Le 8 octobre 2015 à 12:17, par Fennec72 En réponse à : Sidr : Menu de côté Responsive

      Est-ce que ce plugin fonctionne sans soyez créateur ?

      Il semblerait que oui, puisqu’il est, semble-t-il, en fonction sur contrib.spip.net lorsqu’on est sur un smartphone.

    • Le 24 octobre 2015 à 18:30, par DD En réponse à : Sidr : Menu de côté Responsive

      Bon finalement j’ai réussi en prenant les codes et fichier de http://www.berriart.com/sidr/ (et donc sans le plugin).

      C’est chouette ce menu, on peut y ajouter des éléments du site juste en y indiquant sa classe CSS

      dd

    • Le 30 octobre 2017 à 11:24, par chantoine En réponse à : Sidr : Menu de côté Responsive

      Bonjour,
      Il semble en effet que ce plugin soit en fonction sur contrib.spip.net, mais avec une particularité : le menu hamburger reste affiché quel que soit le scrolling, dans le coin en haut à gauche.
      Quelqu’un saurait-il comment parvenir à cet effet ?
      Merci
      Christophe

    • Le 5 novembre 2017 à 23:03, par RealET En réponse à : Sidr : Menu de côté Responsive

      En CSS, avec position : fixed

    Répondre à ce message

  • Le 17 juillet 2017 à 16:26, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

    Bonjour,

    Depuis quelque temps, le menu sidr ne fonctionnait plus en desktop (alors qu’il y fonctionnait il y a 1 an), seulement sur mobile. J’ai cherché sans solution, jusqu’à ce que j’installe la dernière librairie sidr 2016... et ça marche à nouveau !
    Celle du plugin semble de 2013. Peut-être mettre à jour le plugin avec la dernière lib ?
    Merci

    Répondre à ce message

  • Le 6 juin 2017 à 14:14, par galerien En réponse à : Sidr : Menu de côté Responsive

    bonjour,

    j’ai suivi la documentation de ’SIDR’ mais je me trouve avec un lien ’menu de navigation’
    vide . je voudrais savoir comment intégrer mon menu dans le menu SIDR dedans et dans quel fichier se trouve le contenu de ce menu ’SIDR’ .

    j’utilise spip 3.1

    marci d’avance

    Répondre à ce message

  • Le 22 septembre 2016 à 18:15, par fulvio47 En réponse à : Sidr : Menu de côté Responsive

    Bonjour,
    d’abord merci pour ce plugin bien utile !
    Je viens de l’utiliser pour la première fois et j’ai réussi à l’adapter à mon site sur lequel je développe la responsivité de différents médias pour SPIP2.1 : il fonctionne parfaitement à un petit détail près ...
    Les items de menu du volet vertical restent obstinément centrés, je n’ai pas trouvé comment les aligner à gauche.
    Le descriptif de ma mise en place du plugin sidr et des codes html et css sont ici :
    http://www.fat78.net/spip.php?article23
    (réduire la fenêtre du navigateur à moins de 800 px de large pour faire apparaitre le bouton ≡ du volet)
    Si qqun peut m’aider, merci d’avance

    • Le 22 septembre 2016 à 19:55, par DD En réponse à : Sidr : Menu de côté Responsive

      En auscultant le code de ta page (sous Firefox click droit > examiner l’élément) tu dois pouvoir t"en tirer en ajoutant dans ton fichier css perso :

      .sidr ul li {
         text-align: left;}

      dd

    • Le 22 septembre 2016 à 20:13, par fulvio47 En réponse à : Sidr : Menu de côté Responsive

      Gagné, merci bcp !!!

    Répondre à ce message

  • Le 11 avril 2016 à 14:38, par Julien En réponse à : Sidr : Menu de côté Responsive

    Petite imperfection sur le plugin coté JS.

    Lorsque le menu est ouvert en version réduite (mobile), et que l’on agrandi la fenêtre, L’élément « left » dans le body reste effectif. Il faudrait modifier le JS ou forcer le style CSS pour tenir compte de cette éventualité de parcours.

    Merci.

    Répondre à ce message

  • Le 17 février 2016 à 12:52, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

    Quelques CSS qui peuvent aider, sous Bootstrap 3, testé avec SpipR-Dist :

    /* Repositionnement du bouton menu à gauche près du menu Responsive */

    @media screen and (max-width: 767px) {
       .navbar-responsive {
           position: absolute;
           right: auto;
           left: 0;
           width: auto;
       }
       .navbar-responsive .navbar-inner {
           margin: 0;
       }
       .navbar-toggle {
           float: none;
           margin: 1em 0;
       }
       .collapse.in,
       .navbar-collapse {
           display: none;
       }
       #header {
           padding-left: 40px;
       }
    }

    /* Sidr : indentation multi-niveaux sur menu Responsive */

    .sidr ul li ul {
       margin: 0 0 0 1em;
    }

    /* Sidr : transforme le symbole Menu (3 traits) en croiX */
    body.sidr-open #nav .menu-conteneur a.btn > .icon-bar {
           transform-origin: 25% 50% 0;
           transform: rotate(45deg);
           height: 3px;
           transition: rotate 3s;
    }

    body.sidr-open #nav .menu-conteneur a.btn > .icon-bar + .icon-bar {
           transform: rotate(-45deg);
           height: 3px;
    }
    body.sidr-open #nav .menu-conteneur a.btn > .icon-bar + .icon-bar + .icon-bar {
           display: none;
    }

    A affiner très probablement...

    • Le 11 avril 2016 à 14:37, par Julien En réponse à : Sidr : Menu de côté Responsive

      Petite imperfection sur le plugin coté JS.

      Lorsque le menu est ouvert en version réduite (mobile), et que l’on agrandi la fenêtre, L’élément « left » dans le body reste effectif. Il faudrait modifier le JS ou forcer le style CSS pour tenir compte de cette éventualité de parcours.

      Merci.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • spiPDF : générer des contenus sur mesure en PDF

    16 février 2011 – 239 commentaires

    Le plugin spiPDF génère des fichiers au format PDF d’article ou de tout autre élément SPIP, simplement à partir d’un squelette construit au format HTML 4 et facile à modifier. Avertissement de sécurité Ce plugin a fait l’objet d’une faille de sécurité (...)

  • Hébergeurs payants

    24 janvier 2009 – 35 commentaires

    Cet article en encore à réorganiser / scinder en deux selon le type (mutualisé ou pro). À priori, SPIP fonctionnera sur tout hébergeur payant traditionnel (qui propose PHP et MySQL). Merci de ne pas mettre des remarques du genre « l’hébergeur truc (...)

  • MediaBox

    10 mai 2010 – 541 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Convertir un site SPIP 3 en utf-8 avec le plugin Grenier

    8 janvier 2014 – 24 commentaires

    SPIP 3 fonctionne nativement avec l’encodage universel unicode utf-8. Sur certains sites (par exemple sur une mise à jour), on peut avoir un site qui est resté en iso-latin ce qui n’est pas conseillé (source de bugs, d’incompatibilité, ...) . (...)

  • DocumentationFormsTables

    9 décembre 2006 – commentaires

    Article publié : ces notes et d’autres sont désormais publiées sur SPIP-Contrib ici Forms & tables - carnet de notes, donc il faut mieux y aller pour tout complément Différence entre un formulaire et une table un formulaire est dédié a la saisie (...)