Mettre en place un menu Responsive

Bonjour,

J'essaie d'ajouter/supprimer une classe à un élément lors d'un clic sur un bouton en vue de masquer/afficher un menu.

Voici mon code :

    // Affichage/masquage des sous-menus
    $('#menu .parent.off a').click(function(){
      $(this).next().slideDown('Slow');
      $(this).parent().addClass("on");
      $(this).parent().removeClass("off");
      return false;
    });
    $('#menu .parent.on a').click(function(){
      $(this).next().slideUp('Slow');
      $(this).parent().addClass("off");
      $(this).parent().removeClass("on");
      return false;
    });

Tout me semble correct, et je ne saisi pas pourquoi seul l'ajout de la classe fonctionne.
Qu'est-ce qui fait que le removeClass() est inopérant ?

On peut voir ton HTML ?

En passant : toggleClass() / toggleSlide().

Bonjour Spheerys,

Essaye ca :

// Affichage/masquage des sous-menus
    $('#menu .parent.off a').click(function(){
      $(this).next().slideDown('Slow');
      $(this).parent().removeClass("off").addClass("on");
      return false;
    });
    $('#menu .parent.on a').click(function(){
      $(this).next().slideUp('Slow');
      $(this).parent().removeClass("on").addClass("off");
      return false;
    });

Je suis pas sûr mais je pense que le pb est là

Non je pense que le problème vient de ton sélecteur général :

$('#menu .parent.off a')

ou

$('#menu .parent.on a')

il faudrait que tu sélectionnes ton élément sans y inclure la class que tu veux justement manipuler.

Excusez moi de ne pas avoir répondu avant.
J'ai résolu mon problème avec la piste donnée par jb_gfx avec toggleClass() / toggleSlide()
J'ai pu grâce à ces deux fonctions monter le menu destiné aux smartphone.
Voilà mon code, dès fois que ça serve à quelqu'un

    // Affichage/masquage du menu dédié aux smartphones
    var $menu = $('#menu'),
        $menulink = $('#menu-link'),
        $menuTrigger = $('.parent > a');

    $menulink.click(function(e) {
      e.preventDefault();
      $menulink.toggleClass('on');
      $menu.toggleClass('on');
    });

    // Affichage/masquage des sous-menus
    $menuTrigger.click(function(e) {
      e.preventDefault();
      var $this = $(this);
      $this.toggleClass('on').next('ul').slideToggle("slow").toggleClass('on');
    });

Et le code html :

<a href="#" id="menu-link"><i class="icon-th-list"></i> Menu</a>
<nav id="menu" role="navigation">
  <ul>
    <li class="parent"><a href="#">Niveau</a>
    <ul>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
    </ul></li>
    <li class="parent"><a href="#">Niveau</a>
    <ul>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
    </ul></li>
    <li class="parent"><a href="#">Niveau</a>
    <ul>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
      <li><a href="#">Sous-niveau</a></li>
    </ul></li>
    <li><a href="#">Niveau</a>
    <li><a href="#">Niveau</a>
  </ul>
</nav>

Pour la démo, c'est par ici (en résolution smartphone < 510px) : www.jldenois.com

Il y a un truc que j'arrive pas à faire par contre sur ce menu, c'est à le faire apparaître avec un effet slideDown et repartir avec un slideUp. Ca fonctionne sur les sous-menus, mais pas moyen de le mettre en oeuvre sur le menu lui-même... J'ouvrirai peut-être un autre topic pour ce soucis là.
Modifié par Spheerys (07 Jun 2013 - 12:01)

Hello,

super que t'ai pu résoudre ton problème.

par contre, c'est très bizarre de vouloir nommer tes variables avec un $ devant. Fait attention, cela pourrait te créer des conflit avec les framework javascript (jquery, mootools, etc...) et puis ça alourdis le code ^^.

Moi j'aurais écrit ton code comme ça :

    // Affichage/masquage du menu dédié aux smartphones
    $('#menu-link').click(function(e) {
      e.preventDefault();
      $(this).toggleClass('on');
      $('#menu').toggleClass('on');
    });

    // Affichage/masquage des sous-menus
    $('.parent > a').click(function(e) {
      e.preventDefault();
      $(this).toggleClass('on').next('ul').slideToggle("slow").toggleClass('on');
    });

l'utilisation du $(this) permettant de sélectionner l'élément sur lequel l'événement vient de se passer (en l'occurrence ici un clic)


Pour ton souci de slide du menu, je pense qu'il faut que tu fasse comme tu l'a fait pour les sous-menus :

   $('#menu').slideToggle("slow").toggleClass('on');

Du coup je me pose la question si c'est bien utile que tu t’embête avec le css ".on" car d'après la doc jquery ya pas besoin http://api.jquery.com/slideToggle/

Donc si je me trompe pas, le code suivant devrait marcher :

    // Affichage/masquage du menu dédié aux smartphones
    $('#menu-link').click(function(e) {
      e.preventDefault();
      $('#menu').slideToggle("slow");
    });

    // Affichage/masquage des sous-menus
    $('.parent > a').click(function(e) {
      e.preventDefault();
      $(this).next('ul').slideToggle("slow");
    });

Du coup dans le css, tu aurais juste à gérer le display:none du départ.

MrJO a écrit :
par contre, c'est très bizarre de vouloir nommer tes variables avec un $ devant. Fait attention, cela pourrait te créer des conflit avec les framework javascript (jquery, mootools, etc...) et puis ça alourdis le code ^^.

C'est une convention souvent utilisée pour indiquer que la variable est une instance jQuery. Par example ainsi on sait que $button est une instance jquery et la variable "button" un objet dom.
- débuter une variable par $ ne peut pas créer de confilts.
- Ajouter un caractère dans un nom de variable n'alourdit pas vraiment le code

En PHP on doit nommer une variable en commençant par un $, pas en JS (ni dans la plupart des autres langages).

kustolovic a écrit :

C'est une convention souvent utilisée pour indiquer que la variable est une instance jQuery. Par example ainsi on sait que $button est une instance jquery et la variable &quot;button&quot; un objet dom.
- débuter une variable par $ ne peut pas créer de confilts.
- Ajouter un caractère dans un nom de variable n'alourdit pas vraiment le code

Ok je ne savais pas pour le coup du $ car je ne suis pas trop adepte de jquery, c'est vrai que c'est pratique comme ça pour s'y retrouver. (comme ceux qui nomme leur variable de tableau en commençant par "a", d'objet par "o", etc...)

Par contre en commençant par $ les conflit peuvent arriver lors de l'utilisation d'autre lib javascript qui généralement utilise le $ pour se différencier et ne pas impacter les variables js. j'ai déjà vu des libs qu'il fallait init par $menu('id_du_menu');

Pour la lourdeur, je ne parlais pas du $ mais d'instancier a chaque fois un élément par $menu, $menulink, etc.... alors que le sélecteur reste compréhensible : $('#menu')