Sidr : Menu de côté Responsive

Publié le : 30 septembre 2015 – Dernière modification le 21 décembre 2021 – par RealET – 29 commentaires

1
2
3
4
5
16 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)

<?php
define("_SIDR_PERSO", true);

Permet de dire au plugin de ne rien faire automatiquement.

Div à rajouter

Par exemple juste avant le menu concerné.

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

Script

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

Style

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

Pour masquer le menu original

Exemple

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

Notes

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

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

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

13 discussions

  • 1
    Stéphane Santon

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

    • Julien

      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

  • Stéphane Santon

    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

  • Stéphane Santon

    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

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom