Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Discussion: Menu en accordéon.

  1. #1
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    décembre 2018
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : décembre 2018
    Messages : 16
    Points : 14
    Points
    14

    Par défaut Menu en accordéon.

    Bonjour Tout le monde,

    Voilà je suis en train de créer un menu en accordéon avec 2 niveaux qui s'ouvre et se ferme quand je clique dessus. Jusque là ça peut aller.

    De plus un style est appliqué au menu spécifique à la page en cours.

    Mon soucis est que lorsque je clique sur un lien de mon menu et que j'atteins la page du lien, mon menu se ferme entièrement. Voir l'exemple ci-dessous :
    Nom : Capture d’écran 2019-03-12 à 12.04.06.png
Affichages : 25
Taille : 6,3 Ko

    J'aimerais qu'il garde ouvert la section ou se trouve mon lien de la page en cours comme dans l'exemple ci-dessous :
    Nom : Capture d’écran 2019-03-12 à 12.01.01.png
Affichages : 25
Taille : 14,8 Ko

    Voici le script utilisé pour mon menu :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <script>
    (function( $ ) {
    $( document ).ready(function() {
      $('#cssmenu > ul > li > a').click(function() {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');	
        var checkElement = $(this).next(); 
     
    	if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
          $(this).closest('li').removeClass('active');
          checkElement.slideUp('normal');
        }
     
        if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
          $('#cssmenu ul ul:visible').slideUp('normal');
          checkElement.slideDown('normal');
        }
        if($(this).closest('li').find('ul').children().length == 0) {
          return true;
        } else {
          return false;	
        }		
      });
    });
    } )( jQuery );
    </script>
    Si vous pouvez m'aider et si vous avez une petit idée, ça serait super.

    Merci d'avance en cas.

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    Bonjour,

    1- avec le code HTML associé, ce serait mieux...

    2-
    ...lorsque ... j'atteins la page du lien, mon menu se ferme entièrement...
    Comment est appliquée la classe "active" au "bon élément" sur chaque page ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    décembre 2018
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : décembre 2018
    Messages : 16
    Points : 14
    Points
    14

    Par défaut

    Autant pour moi je donne toute les sources :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div id="cssmenu" class="menuCampaign" SCROLLING="yes">
    <ul>
       <li class='has-sub'><a href='#'><span>&Eacute;lectrom&eacute;nager</span></a>
         <ul>
                <li><a href="">Pr&eacute;parer et entretenir son jardin</a></li>
                <li><a href="">Guide d'achat tondeuse</a></li>
                <li class="last"><a href="">Guide d'achat tronçonneuse</a></li>
          </ul>
      </li>
       <li class='has-sub'><a href='#'><span>Jardin</span></a>
          <ul>
                <li><a href="">Pr&eacute;parer et entretenir son jardin</a></li>
                <li><a href="">Guide d'achat tondeuse</a></li>
                <li class="last"><a href="">Guide d'achat tronçonneuse</a></li>
          </ul>
       </li>
     
    </ul>
    </div>
    css:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    /* Base Styles */
    #cssmenu,
    #cssmenu ul,
    #cssmenu li,
    #cssmenu a {
      margin: 0;
      padding: 0;
      border: 0;
      list-style: none;
      font-weight: normal;
      text-decoration: none;
      line-height: 1;
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      position: relative;
    }
    #cssmenu a {
      line-height: 1.3;
    }
    #cssmenu {
      width: 242px;
      background: #fff;
      padding: 3px;
     
    }
    #cssmenu > ul > li {
      margin: 0 0 2px 0;
      border-bottom:1px solid #ddd;
    }
    #cssmenu > ul > li:last-child {
      margin: 0;
    }
    #cssmenu > ul > li > a {
      font-size: 15px;
      display: block;
      color: #333;
    }
    #cssmenu > ul > li > a > span {
      display: block;
      padding: 6px 10px;
      font-weight: bold;
    }
    #cssmenu > ul > li > a:hover {
      text-decoration: none;
    }
    #cssmenu > ul > li.active {
      border-bottom: none;
    }
    #cssmenu > ul > li.active > a {
      color: #97be10;
    }
    #cssmenu > ul > li.active > a span {
      border-bottom:1px solid #ddd;
    }
    #cssmenu > ul > li.has-sub > a span {
      background: url(http://pmcdn.staticpmrk.com/visuels/2015-03-18_GuideDachat/images/flecheMenu3.png) 98% center no-repeat;
      background-position-y:10px;
    }
    #cssmenu > ul > li.has-sub.active > a span {
      background: url(http://pmcdn.staticpmrk.com/visuels/2015-03-18_GuideDachat/images/flecheMenu3.png) 98% center no-repeat;
      background-position-y:-10px;
    }
    /* Sub menu */
    #cssmenu ul ul {
      padding: 5px 12px;
      display: none;
    }
    #cssmenu ul ul li {
      padding: 5px 0;
      border-bottom:1px solid #eee;
    }
    #cssmenu ul ul a {
      display: block;
      color: #595959;
      font-size: 13px;
      font-weight: bold;
    }
     
    #cssmenu ul ul a:hover {
      color: #79980d;
    }

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    Comment est appliquée la classe "active" au "bon élément" sur chaque page ?
    Tu n'as pas répondu à la question.

    1- Il faut appliquer la classe active au <li> du menu principal et du sous-menu de la page en cours.
    2- Il faut l'"activer" en JS au "chargement de la page".
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    décembre 2018
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : décembre 2018
    Messages : 16
    Points : 14
    Points
    14

    Par défaut

    Désolé, en effet c'est aussi une de mes recherches, je l'ai mal exprimé dans la discussion.
    En attendant je rajoutais juste une class manuellement pour simuler une sélection.
    J'ai vue qu'on pouvait lire une page active grace à :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <?php var_dump ($_SERVER); ?>
    Mais je pensais le voir dans un second temps.

    Mais peut-être je me trompe et qu'il faut tout faire en même temps pour ce que je souhaite faire.

    En tout cas merci de m'accorder du temps

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    14 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 14 099
    Points : 28 500
    Points
    28 500

    Par défaut

    Forcément.
    Si tu ne mets pas les classes "active" au chargement de la page, c'est normal que le menu reste fermé.

    Il faut en effet comparer (en PHP) l'URL de la "page en cours" à l'URL du lien.



    Sinon, j'ai fait ce code : https://codepen.io/jreaux62/pen/dZoxKQ
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre à l'essai
    Homme Profil pro
    Webmaster
    Inscrit en
    décembre 2018
    Messages
    16
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : décembre 2018
    Messages : 16
    Points : 14
    Points
    14

    Par défaut

    Merci, je vais aller voir tout ça.

Discussions similaires

  1. Menu en accordéon
    Par ChristiandeGranville dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 11/03/2011, 21h17
  2. [AJAX] Spry et menu accordéon
    Par Kahlyv dans le forum AJAX
    Réponses: 2
    Dernier message: 02/07/2009, 19h01
  3. Bug positionnement dans menu "accordéon" multiniveau
    Par BnA dans le forum ActionScript 1 & ActionScript 2
    Réponses: 0
    Dernier message: 07/04/2008, 16h48
  4. lien dans menu en accordéon
    Par @laulau@ dans le forum Flash
    Réponses: 1
    Dernier message: 21/08/2007, 18h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo