Créer un site internet
Sans connaissance

Sans aucune connaissance
Découvrez Myebox maintenant ! Créer un site internet

Beau menu déroulant – HTML 5 et CSS 3

Dans ce tutoriel Html & Css, nous allons vous montrer comment créer un très beau menu déroulant. Nous allons bien évidemment utiliser les nouveau attributs des langages HTML & CSS qui enjolivent toujours plus nos sites web.

menu Css & Jquery

Voir la démo Télécharger le fichier zip

1 ère étape : créer le menu en html

<div id="content">
    <ul>
        <li><a href="#">Amis <span>340</span></a>
            <ul>
                <li><a href="#">Famille<span>14</span></a></li>
                <li><a href="#">Ecole<span>6</span></a></li>
                <li><a href="#">Travail<span>2</span></a></li>
            </ul>
        </li>
        <li><a href="#">Videos <span>147</span></a>
            <ul>
                <li><a href="#">Sport<span>14</span></a></li>
                <li><a href="#">Musique<span>6</span></a></li>
                <li><a href="#">Cuisine<span>2</span></a></li>
            </ul>
        </li> Etc...
    </ul>
</div>

2ème étape : le style CSS

body {
    font-size: 100%;
    background:#32373d;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#content {    
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: auto;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
      width: 1em;
    position: absolute;
      left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}
.menu > li > a span {
    font-size: 0.857em; 
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; 
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0; 
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}
.menu > li > ul li a:before{
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}

.menu ul > li > a span {
    font-size: 0.857em; 
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0; 
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}

Ces quelques lignes demandent un léger éclaircissement. Nous utilisons beaucoup d’attributs permettant d’obtenir des effets dégradés et ombrés (attribut ‘shadow’ et gradient).

Le sprite image pour les icônes

Vous l’aurez sûrement remarqué mais dans ce CSS, nous appelons une seule et unique image que l’on positionne grâce aux coordonnées numérique de telle sorte à limité le nombre de requête pour aller chercher les images.

.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}

3ème étape :  du jquery pour dynamiser

La bibliothèque directement prise à la source pour bénéficier de la rapidité des serveurs.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

La fonction javascript qui nous permettra de gérer les différents comportements au clic

$(function() {     var menu_ul = $('.menu > li > ul'),
        menu_a  = $('.menu > li > a');
    menu_ul.hide();
    menu_a.click(function(e) {
        e.preventDefault();
        if(!$(this).hasClass('active')) {
            menu_a.removeClass('active');
            menu_ul.filter(':visible').slideUp('normal');
            $(this).addClass('active').next().stop(true,true).slideDown('normal');
        } else {
            $(this).removeClass('active');
            $(this).next().stop(true,true).slideUp('normal');
        }
    });
});

Voir la démo Télécharger le fichier zip

46 réponses à "Beau menu déroulant – HTML 5 et CSS 3"

  1. Anaïs Posté le 25 août 2014 à 18 h 04 min

    Bonjour,

    Je vous remercie d’avoir répondu aussi rapidement à ma question.
    Cela complique malheureusement ma tâche mais vos explications sont très claires.

    Merci et bonne soirée,
    Anaïs

  2. Anaïs Posté le 23 août 2014 à 10 h 24 min

    Bonjour,

    Je viens de trouver votre script, il est super ! Merci !

    Serait-il possible d’adapter le script pour que les sous-menus affichés restent visibles jusqu’à que je clique à nouveau sur un menu parent ou sur un autre sous-menu tout en navigant sur le reste de la page ?
    Exemple : http://www.monoeil.net/paris/artistes-de-rue#1

    J’ai lu les précédents commentaires, il semblerait qu’il faille supprimer la ligne :
    menu_ul.filter(‘:visible’).slideUp(‘normal’);
    J’ai essayé la manip mais rien ne change… Les sous-menus disparaissent toujours lorsque je clique sur l’un d’eux.

    Parlons-nous de la même chose ? Comment puis-je faire ?
    Je vous remercie par avance,

    • Samy Giacomel Posté le 23 août 2014 à 11 h 22 min

      Bonjour Anaïs,

      Le site exemple que vous proposez fonctionne à l’aide d’une navigation en AJAX : seul le contenu sur la droite se recharge, pas le menu. C’est pour cette raison que sur ce site, le menu ne change pas lors de la navigation sur la page.

      Sur la version que nous proposons dans ce tutoriel, la navigation est basique donc à chaque clic sur un lien, toute la page se recharge, ce qui remet le menu dans son état initial.

      Donc pour mettre en place un menu identique à monoeil.net, il vous faudrait utiliser une navigation en ajax sur le site comme ils le font.

      En espérant avoir répondu à votre question,
      Cordialement,

      Samy

  3. moez Posté le 5 juillet 2014 à 0 h 44 min

    Bonsoir !! J’ai modifié le code html ci-dessous mais les liens ne fonctionnent pas correctement comme dans le navigateur exemple!!!
    Qui peut m’aider SVP??

    Acceuil
    A Propos
    Identité classe
    Identité élèves
    Niveaux scolaires

    Arabe

    1ère année
    2ème année
    3ème année
    4ème année
    5ème année
    6ème année

    Français

    3ème année
    4ème année
    5ème année
    6ème année

    Anglais

    6ème année

    Ressources340

    Manuels scolaires
    Fichiers-classes6
    Bandes dessinées2
    Ressources pédagogiques2

    Localisez-nous222
    Contact222

  4. MrF Posté le 30 juin 2014 à 19 h 06 min

    Bonsoir,

    Quel balise de codage dois-je intégrer ou modifier au sein de ce type de menu HTML/CSS/JS sur ma feuille de style JS pour éviter une modification de mise en page car les éléments disposés au sein de ma page HTML se déplacent ; ce type de problème destructure toute ma mise en page .
    En attente de vos réponses .
    Merci pour votre compréhension .
    Mr.F

  5. Pierre Posté le 30 juin 2014 à 14 h 42 min

    bonjour, le code fonctinne très bien avec chrome, par contyre, sous IE11 les sprites ne s’affichent pas :-(
    une solution ?

  6. Jules Posté le 19 mai 2014 à 16 h 20 min

    c’est exactement les informations que je cherchais , meeercii infiniment !!

  7. Mercier Posté le 28 avril 2014 à 11 h 04 min

    Bonjour

    Comment faire pour ouvrir plusieurs onglet en même temps ?

    cordialement

    • Samy Giacomel Posté le 28 avril 2014 à 11 h 34 min

      Bonjour,

      Pour ouvrir plusieurs onglets en même temps, il faudrait passer par du javascript supplémentaire.
      Une solution pourrait être d’affecter un id à chaque onglet, et d’ajouter des fonctions pour qu’au clic sur un élément donné, les onglets souhaités (alors ciblés par leurs id) s’ouvrent.
      Pour que le code soit plus propre, le mieux serait alors de créer une fonction gérant l’ouverture d’un onglet et d’appeler cette fonction sur chaque id souhaité.

      Cordialement,
      Samy

  8. O. LESAINT Posté le 31 mars 2014 à 17 h 51 min

    Merci beaucoup pour ce complément d’infos, cela fonctionne parfaitement comme je le souhaite maintenant !

  9. O. LESAINT Posté le 31 mars 2014 à 15 h 22 min

    « Pour que l’un des menu soit déjà déroulé au chargement de la page, vous pouvez modifier légèrement le html comme ceci :
    - Ajoutez la classe active au a
    - Ajoutez style= »display:block » dans le ul
    De cette manière l’onglet sera coloré et le sous-menu déplié. »

    Est-il possible svp d’avoir plus d’explications pour mettre en place cette fonction, je n’y parviens pas . . .
    1° faut-il remplacer la classe « item1″ par « active » ?
    2° faut-il sélectionner tout le ul pour lui appliquer le style display = block ?

    J’avoue tourner en rond et je m’en remets à vos précieux conseils, avec mes remerciements pour ce magnifique menu !

    • Samy Giacomel Posté le 31 mars 2014 à 15 h 43 min

      Bonjour,
      Puisqu’un exemple est souvent plus parlant qu’un long discours, voici un fichier contenant le menu avec un onglet déplié :
      http://www.web-imaginative.com/tutorials/slidingMenu/menu-tab-open.zip
      Vous constaterez que l’on a juste ajouté quelques fonctionnalités en JS concernant la classe « open » ainsi que cette classe « open » et la classe « active » au niveau du volet pré-ouvert.
      N’hésitez pas si vous avez d’autres questions :)

  10. Yulrick Posté le 4 mars 2014 à 5 h 52 min

    Bonjour,

    Merci pour la réponse tous marche nickel :) Bonne continuation

  11. gboa Posté le 2 mars 2014 à 23 h 46 min

    Bonsoir, merci pour le code du menu, il m’a beaucoup aidée !
    Cependant je rencontre un problème : dans mon menu seul deux « titres » sur quatre ont une partie déroulante, les liens vers les pages sont bons pour ce qui est des sous-menus (les titres du premiers niveau n’ayant pas de lien), mais rien ne se passe lorsque je clique sur les deux autres titres du premier niveau (qui n’ont pas de partie déroulante).
    J’ai modifié le code à ma convenance comme suit :

    Home
    Galleries
    Hambourg

    Exhibitions/Publications
    Info

    Bio
    Contact

    quel est le soucis ? Merci de votre réponse ! Bonne soirée

    • Samy Giacomel Posté le 3 mars 2014 à 9 h 10 min

      Bonjour,
      Par défaut, tous les liens des onglets sont désactivés pour permettre la navigation dans les sous-onglets.
      Une solution pour vous consiste à remplacer la fonction sur menu_a dans le javascript par ceci :
      menu_a.click(function(e) {
      if ($(this).parent().find(« ul »).length > 0) {
      e.preventDefault();
      if(!$(this).hasClass(‘active’)) {
      menu_a.removeClass(‘active’);
      menu_ul.filter(‘:visible’).slideUp(‘normal’);
      $(this).addClass(‘active’).next().stop(true,true).slideDown(‘normal’);
      } else {
      $(this).removeClass(‘active’);
      $(this).next().stop(true,true).slideUp(‘normal’);
      }
      }
      });

      Ainsi, si un onglet ne contient pas de sous-menu, le lien sera suivi, sinon il déroulera le sous-menu.

      • Romain Posté le 4 juillet 2014 à 11 h 56 min

        Bonjour,
        merci pour ce très beau menu déroulant,
        cependant je suis aussi confronté au problème de lien sur le menu principal,

        j’ai modifié le javascript comme indiqué mais j’ai deux problème :
        1- DW m’indique une erreur de syntaxe sur la ligne « if ($(this).parent().find(« ul »).length > 0) { » (oui celle que l’on rajoute)
        2- Le menu déroulant ne déroule plus, il reste déroulé par défaut

        Merci pour votre aide.

        • Romain Posté le 4 juillet 2014 à 12 h 03 min

          Re

          J’ai trouvé une solution en enlevant « if ($(this).parent().find(« ul »).length > 0) {
          e.preventDefault(); » et non avons ça :

          menu_a.click(function(e) {
          if(!$(this).hasClass(‘active’)) {
          menu_a.removeClass(‘active’);
          menu_ul.filter(‘:visible’).slideUp(‘normal’);
          $(this).addClass(‘active’).next().stop(true,true).slideDown(‘normal’);
          } else {
          $(this).removeClass(‘active’);
          $(this).next().stop(true,true).slideUp(‘normal’);
          }
          }
          });

          le menu déroulant se déroule correctement et les liens se lancent.

          Merci !

          • Olivier
            Olivier Posté le 6 septembre 2014 à 0 h 02 min

            bonjour, j’ai essayé toutes les solutions que vous proposez, mais, soit les menus ne se déroulent pas, soit les liens ne fonctionnent pas. Le meilleur rendu pour mon site est encore quand je laisse le javascript de départ (quand il n’y avait pas de soussousmenu.)

            Par contre, les liens pour contact et lien ne fonctionnement pas. Sauf en cliquant droit et ouvrant dans un nouvel onglet.

            Je n’y connais pas grand chose, si quelqu’un connaît la solution, je suis preneur.
            Vous pouvez voir mon site : http://www.matheclair.fr

            Merci par avance.

  12. Yulrick Posté le 1 mars 2014 à 3 h 31 min

    Bonjour,

    Nikel ce menu cependant lorsque je met dans un ul de mon choix style= ‘display:block ‘ il ne ce développe pas a l’ouverture de la page . Une solution???? Merci d’avance de traiter ma demande. Ps : l’adresse de la beta de la page ou ce trouve le script est http://www.inreims.fr/indexrentrertest.php

    • Samy Giacomel Posté le 3 mars 2014 à 9 h 04 min

      Bonjour,
      A l’initialisation du javascript, tous les ul sont cachés, d’où votre problème.
      Voici ce que vous pouvez faire :
      - Ajouter la classe « open » au li que vous voulez ouvrir (qui contient le ul et le a)
      - Et transformer la déclaration des variables JS en ceci :
      var menu_ul = $(‘.menu > li > ul’),
      menu_open = $(‘.menu > li.open > ul’),
      menu_a = $(‘.menu > li > a’);
      menu_ul.not(menu_open).hide();
      La suite reste inchangée.
      N’oubliez pas également de mettre la classe « active » au a dans le li pour que l’onglet soit actif par défaut.

  13. Romu Posté le 15 février 2014 à 17 h 38 min

    Il est magnifique, bravo, question, je n’arrive à forcer un des déroulé, par exemple l’item2

    • Samy Giacomel Posté le 17 février 2014 à 18 h 41 min

      Bonjour,
      Pour que l’un des menu soit déjà déroulé au chargement de la page, vous pouvez modifier légèrement le html comme ceci :
      - Ajoutez la classe active au a
      - Ajoutez style= »display:block » dans le ul
      De cette manière l’onglet sera coloré et le sous-menu déplié.
      L’autre solution consiste à faire un trigger("click") sur le le lien de l’onglet à pré-ouvrir au chargement de la page, mais vous risquez de voir l’animation, ce qui sera moins propre…

  14. test Posté le 21 janvier 2014 à 21 h 20 min

    Bonsoir , comment faire pour que quand on clique sur <> qu’il y ait un autre defilement encore dans ce sous menu . Merci

    • Samy Giacomel Posté le 22 janvier 2014 à 9 h 49 min

      Bonjour,
      Voici une version des fichiers contenant quelques modifications pour prendre en compte les « sous-sous-menus » :
      http://www.web-imaginative.com/tutorials/slidingMenu/menu3.zip
      Nous avons ajouté des sous-sous-menus à la sous-rubrique « sports » dans vidéos.
      En espérant que cela réponde à votre question :)
      Petite précision si vous souhaitez que les sous-menus qui ne contiennent pas de sous-sous-menu ouvrent les liens, remplacez simplement
      e.preventDefault();
      par
      if ($(this).parent().find(« ul »).length > 0) e.preventDefault();
      dans le javascript.

  15. Abdel Posté le 16 janvier 2014 à 17 h 12 min

    S’il vous plait, est ce que vous avez le code pour mettre ce menu en « horizontal »

    Merci beaucoup.

    • Samy Giacomel Posté le 16 janvier 2014 à 17 h 19 min

      Bonjour,
      Pour mettre le menu en mode horizontal, il faut modifier tout le css et changer les fonctions slideUp et slideDown dans le jQuery par un animate sur la position.
      Nous n’avons pas de code pour cette version, car ce type de menu en accordéon se prête plus en général à un style vertical.

  16. tazi Posté le 19 décembre 2013 à 16 h 33 min

    Bonjour,
    Merci pour votre réponse rapide et pour la solution de la première question, pour la deuxième je m’explique plus, par exemple j’ai un menu avec Photos, Message, Contact … et des sous menu de contact ( favoris, famille, pro ect…)
    lorsque je clique sur Contact cela m’affiche les 3 sous-menu et quand je clique sur un sous-menu par ex favoris, la page se recharge et je vais directement sur la page favoris où j’ai le menu aussi mais le problème c’est qu’il y a que les menus qui sont affichés le trois sous menu ne le sont plus.
    j’aimerais bien que même si la page se recharge, les sous menu affichés restent affichés jusqu’à que je clique à nouveau sur le menu parent ou je clique sur un autre.
    Merci d’avance.

  17. tazi Posté le 19 décembre 2013 à 11 h 16 min

    Bonjour, tout d’abord je tiens à vous remercier pour le menu, s’il vous plait j’ai deux question :
    1-dans menu Accueil lorsque j’ai remplacé le # par le lien de ma page d’accueil de mon site ça ne bouge pas, je reste sur la même page où je suis.

    2-lorsque je clique sur un menu ( amis par ex ) et je clique par la suite sur un sous menu ( école par ex ) les sous menu se cachent je veux bien qu’ils restent affichés.

    Merci d’avance pour votre réponse.

    • Samy Giacomel Posté le 19 décembre 2013 à 12 h 03 min

      Bonjour,
      1- Pour utiliser un onglet principal comme lien (comme ‘Amis’ ou ‘Vidéos’ dans la démo) il suffit de remplacer dans le javascript
      e.preventDefault();
      par
      if ($(this).parent().find("ul").length > 0) e.preventDefault();
      De cette manière, tous les éléments de menu ne contenant pas de sous-menu pointeront bien vers leur lien.
      2- Lorsque vous cliquez sur un sous-menu, dans la démo, le principe est de renvoyer l’internaute vers le lien de ce sous-onglet. Si votre question porte sur la navigation dans le menu ‘en accordéon’ (chaque clic sur un menu ferme les sous-menus des autres menus déjà ouverts), dans ce cas vous pouvez laisser tout affiché en supprimant la ligne 8 du javascript
      menu_ul.filter(':visible').slideUp('normal');

  18. Poupiairis Posté le 15 décembre 2013 à 21 h 13 min

    Bonsoir,
    très joli menu déroulant ! Cependant j’aurais souhaité pourvoir changer les couleurs des menus, lorsque la souris passe dessus, indépendamment les uns des autres et que cette couleur soit la même pour le sous menu concerné. Ça fait des heures que j’essaye en vain. Please help!

    • Sébastien Briot Posté le 19 décembre 2013 à 11 h 27 min

      Bonjour, pour changer les couleurs Hover (au survol), il faut cibler précisément chaque élement avec un id ou une classe spécifique en amont. Par exemple, #item-1 a.onglet:hover {background-color: rouge}, #item-2 a.onglet:hover {background-color: bleu}

  19. CrQck3d Posté le 26 novembre 2013 à 18 h 17 min

    Bonjour, ce menu déroulant est vraiment superbe, cependant, il mes un peu le bazar dans mon css … jugez par vous même : http://lolsongs.com/sounds/francais.html

    • CrQck3d Posté le 26 novembre 2013 à 18 h 19 min

      Et je voudrais savoir comment on fait pour rajouté encore un sous-menu et si il est possible de mettre un fichier audio en html 5 dans un des sous-menu ?

      • Sébastien Briot Posté le 27 novembre 2013 à 13 h 41 min

        Bonjour, peut être que certains éléments font effectivement conflit avec d’autres classes/ID. Il suffit de changer/remplacer ces éléments dans le css et dans le html ou cibler en utilisant des règles css plus strictes. Concernant le rajout d’un sous-menu et du fichier en HTML 5, vous pouvez le faire sans problème en ajoutant votre propre code.

  20. xavier Posté le 5 septembre 2013 à 17 h 19 min

    bonjour,
    Merci pour le tuto il est très bien fait.
    J’aurais une petite question, je souhaite faire 2 niveaux de sous menu, je voudrais savoir ce qu’il faut modifier pour obtenir cela?
    Afin d’être le plus clair possible, j’ai un onglet année et lorsque l’on clic dessus il se déroule en mettant des années et des infos relatives à celles ci. je voudrais que lorsque l’on clique dessus il déroule les années et c’est en cliquant sur les années que les infos apparaisse.
    Merci de votre aide.

    • Imaginative Posté le 5 septembre 2013 à 17 h 51 min

      Bonjour,
      Voici une version des fichiers contenant quelques modifications pour prendre en compte les « sous-sous-menus » :
      http://www.web-imaginative.com/tutorials/slidingMenu/menu3.zip
      Nous avons ajouté des sous-sous-menus à la sous-rubrique « sports » dans vidéos.
      En espérant que cela réponde à votre question :)

      • xavier Posté le 6 septembre 2013 à 10 h 20 min

        Merci de votre réponse par contre mais lien dans les différents sous menus ne fonctionnent plus. comment résoudre ce problème?

        • Imaginative Posté le 11 septembre 2013 à 11 h 55 min

          Bonjour,
          Pour que les sous-menus qui ne contiennent pas de sous-sous-menu ouvrent les liens, remplacer simplement
          e.preventDefault();
          par
          if ($(this).parent().find("ul").length > 0) e.preventDefault();
          dans le javascript.

  21. udine1981 Posté le 30 août 2013 à 9 h 59 min

    Bonjour, ce menu est superbe, vraiment génial mais cependant j’ai un souci. En effet, sur certains menu, je n’ai pas besoin de sous-menu et du coup je souhaitais mettre seulement un lien sur ce menu. Mais cela ne fonctionne pas, les liens ne fonctionnent que sur un sous menu. Est-ce qu’il y aurait une solution ?

    Merci beaucoup.

    • Imaginative Posté le 30 août 2013 à 10 h 41 min

      Bonjour,

      Dans la fonction jQuery, le ‘ e.preventDefault(); ‘ empêche les liens sur les onglets de se charger au profit de la fonction qui déroule le sous-menu.

      Pour gérer les cas où il n’y a pas de sous-onglet, il faudrait ajouter une condition qui détecte la présence d’un sous-menu :

      $(function() {
      var menu_ul = $('.menu > li > ul'),
      menu_a = $('.menu > li > a');
      menu_ul.hide();
      menu_a.click(function(e) {
      if ($(this).parent().find("ul").length > 0 || $(this).attr("href") == "#") {
      e.preventDefault();
      if(!$(this).hasClass('active')) {
      menu_a.removeClass('active');
      menu_ul.filter(':visible').slideUp('normal');
      $(this).addClass('active').next().stop(true,true).slideDown('normal');
      } else {
      $(this).removeClass('active');
      $(this).next().stop(true,true).slideUp('normal');
      }
      }
      });
      });

      Vous pouvez remplacer le javascript par cette fonction et les onglets qui n’ont pas de sous-menu, ET dont l’attribut « href » ne vaut pas « # » chargeront l’url du lien au clic.

      • udine1981 Posté le 17 septembre 2013 à 9 h 13 min

        Bonjour,

        Merci beaucoup et désolé pour le retard à répondre.
        Tout fonctionne très bien et la nouvelle fonction remplie parfaitement ses fonctions.

        Merci beaucoup.

  22. xelory Posté le 7 mai 2013 à 19 h 06 min

    Bonjour,

    Merci beaucoup, avec votre nouveau fichier cela fonctionne parfaitement ! Merci pour votre sérieux et votre réactivité, je recommande ce site à tout le monde ;)

  23. xelory Posté le 6 mai 2013 à 21 h 22 min

    Bonsoir,

    J’ai essayé vos solutions mais malheureusement en vain, l’accordéon reste toujours ouvert. Avec une classe li unique, ça donne quoi comme structure ?

    Merci beaucoup.

  24. xelory Posté le 4 mai 2013 à 21 h 39 min

    Bonjour, j’ai essayé ce code sur un menu sidebar dans Joomla, mais cela ne fonctionne pas… Tout du moins l’effet accordéon, Le menu est bien affiché (bonnes couleurs, etc) mais l’accordéon est ouvert et on ne peut pas le refermer.

    J’ai essayé d’insérer le code avec des plugins de type sourcer ou flexicustom code mais en vain :(

    • Imaginative Posté le 6 mai 2013 à 13 h 42 min

      Plusieurs choses à tester :
      1) Modifiez l’emplacement de l’appel de la fonction js (elle est peut être appelé juste avant un autre js qui créé un conflit).
      2) Vérifiez que les classes qui déclenchent les événements soient bien présentes / qu’il n’y ait pas un autre conflit avec un ul li
      3) Affectez une classe unique au à la liste (li) et remplacez l’appel « .menu > li > a » de la fonction js par cette classe unique.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


− 1 = sept

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>