SPIP-Contrib

SPIP-Contrib

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

288 Plugins, 197 contribs sur SPIP-Zone, 222 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 – 16 commentaires

10 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.

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 1er avril 2017

Retour en haut de la page

Vos commentaires

  • Le 17 juillet à 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 à 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

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

    Bonjour,
    Je viens de modifier le plugin (v1.3.0) pour pouvoir paramétrer le bouton d’appel : au lieu d’insérer un div spécifique #responsive-menu-button, il suffit dans la config de désigner une zone existante.

    Donc avec le plugin Menus et Bootstrap, il suffit de désigner #nav .btn

    Je rajouterais bien quelques styles à ce plugin :
    -  indentation multi-niveaux
    -  changement de l’aspect du bouton Bootstrap
    -  supprimer quelques effets colorés illisibles,
    -  ...

    Le CSS inclus est-il celui du plugin JQuery d’origine, ou bien peut-il être modifié pour le plugin Spip ?

    Merci

    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

    Répondre à ce message

  • Le 14 octobre 2015 à 14:59, par Stéphane Santon En réponse à : Sidr : Menu de côté Responsive

    Bonjour,

    J’ai essayé avec le plugin Menus, avec simple installation et configuration de l’id à #nav : ça ne marchait pas.

    En cherchant, il semble que le plugin ne place pas automatiquement le div

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

    Il faut absolument le placer dans le squelette de la page, même sans les personnalisations permises par mes_options.

    Donc pour être clair, je crois qu’il faut dans cet article déplacer la description du DIV avant le paragraphe de personnalisation.

    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

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 2190 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • GIS 4

    11 août 2012 – 1384 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Plugin Contacts & Organisations

    4 janvier 2010 – 267 commentaires

    Ce plugin ajoute à SPIP des fonctionnalités de gestionnaire de contacts. Distingue les personnes morales (organisations) des personnes physiques (contacts) en conservant tous les attributs des auteurs SPIP. En conjonction avec le plugin (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 810 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

  • Crayons : Contrôleurs et Vues

    1er mai 2007 – 22 commentaires

    Cet article est en cours de rédaction (donc incomplet), merci si vous avez : des corrections, des compléments, des exemples (simples si possible), des captures d’écran ou videos de démo, une traduction à proposer, n’hésitez (...)

Ça spipe par là