• Menu déroulant

     

    Pour suive ce tutoriel, vous avez besoin d'un minimum de connaissance en HTML et en CSS, nous n'utiliserons pas de JS.

    HTML


    On va créer notre menu sous la forme de listes imbriquées. La première liste contiendra les titres visibles, et les sous-listes seront les onglets visibles au survol.
    1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS

    <div id="menu_deroulant">

    </div>

    2- Créez votre première liste (les titres visibles)

    <div id="menu_deroulant">
         <ul>
              <li>
                   Titre 1
              </li>
              <li>
                   Titre 2
              </li>
              <li>
                   Titre 3
              </li>
         </ul>
    </div>

    3- Enfin, créez vos sous listes qui apparaitrons au survol

    <div id="menu_deroulant">
         <ul>
              <li>Titre 1
                   <ul>
                        <li> Onglet 1 </li>
                        <li> Onglet 2 </li>
                        <li> Onglet 3 </li>
                   </ul>
              </li>
              <li>Titre 2
                   <ul>
                        <li> Onglet 1 </li>
                        <li> Onglet 2 </li>
                        <li> Onglet 3 </li>
                   </ul>
              </li>
              <li>Titre 3</li>
         </ul>
    </div>

    4- N'oubliez pas d'ajouter vos liens

    <div id="menu_deroulant">
         <ul>
              <li>Titre 1
                   <ul>
                        <li> <a href="#">Onglet 1</a> </li>
                        <li> <a href="#">Onglet 2</a> </li>
                        <li> <a href="#">Onglet 3</a> </li>
                   </ul>
              </li>
              <li>Titre 2
                   <ul>
                        <li> <a href="#">Onglet 1</a> </li>
                        <li> <a href="#">Onglet 2</a> </li>
                        <li> <a href="#">Onglet 3</a> </li>
                   </ul>
              </li>
              <li><a href="#">Titre 3</a></li>
         </ul>
    </div>

     

    CSS


    Ne modifiez pas le code suivant, il permettra à votre menu de fonctionner correctement.

    #menu_deroulant ul {
              margin:0;
              padding:0;
              list-style-type:none; }
    #menu_deroulant li { 
              float:left; }
    #menu_deroulant li:hover ul li { 
              float:none; }
    #menu_deroulant ul li ul { 
              display:none; }
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul {
              position:absolute;
              z-index: 10; }

    Passons maintenant à la personnalisation :

    La "barre" contenant vos titres visibles.

    #menu_deroulant{
              height: Xpx;  /*définissez sa hauteur*/
              propriété : valeur;  /*personnalisez*/
    }

    Le code suivant correspond à vos titres visibles.

    #menu_deroulant ul li a,
    #menu_deroulant ul li {
              display:block;
              propriété : valeur;  /*personnalisez*/
    }

    Code pour les onglets visibles au survol.

    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li{
              display:block;
              propriété : valeur;  /*personnaliser*/
    }

      

    Placement dans l'en-tête


    Mettez votre HTML dans un module simple. Puis modifier votre id dans le css de la manière suivante :

    #menu_deroulant{
              height: Xpx;  /*définissez sa hauteur*/
              propriété : valeur;  /*personnalisez*/
              position: absolute;
              top: Xpx ; /*position par rapport au haut de la page*/
              left: Xpx; /*position par rapport au bord gauche de la page*/
    }

    "position: absolute" rend votre menu indépendant par rapport aux autres éléments de la page. Déplacez le ensuite en changeant les valeurs de "top" et "left"

    Pour plus d'information, je vous renvoie à l'article suivant :
    => http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132


  • Commentaires

    1
    Dimanche 12 Janvier 2014 à 12:10

    Merci beaucoup !! :) c'est super sympa de ta part. :D

    2
    Dimanche 12 Janvier 2014 à 16:40

    C'est génial ^^ . Aprés on peut mettre de la transition, pour faire plus beau :) .

    3
    Dimanche 12 Janvier 2014 à 17:05

    Bien sur, ce n'est que le code de base, vous pouvez personnaliser ça comme vous voulez ;)

    4
    Dimanche 12 Janvier 2014 à 17:14

    Merci infiniment pour ce code que je cherchais depuis longtemps :) Grâce à toi j'ai enfin un menu déroulant comme j'en rêvais :)

    5
    Dimanche 12 Janvier 2014 à 17:15

    Oui :) .

    6
    Dimanche 12 Janvier 2014 à 19:39

    Coucou, voila moi sa marche qu'à moitié, les onglets visible ne ce mettent pas à la verticale comme il ce doit, ils sont encore comme si on les mettait dans une feuille simple. Comment faire?

    7
    Dimanche 12 Janvier 2014 à 19:47

    "comme si on les mettait dans une feuille simple".  C'est à dire ? ^^'

    Ce qui permet aux titres d'être placés horizontalement et les onglet verticalement, c'est ce petit bout de code :

    #menu_deroulant li {
              float : left; }

    #menu_deroulant li:hover ul li {
              float : none; }

    La première partie "casse" la structure verticale d'une liste pour placer les différents points (les titres) à la suite.

    La deuxième partie supprime cet effet pour les sous liste au survole. Ils reprennent donc leur apparence de liste, à savoir verticalement.

    Vérifie que tu n'as pas supprimé ou modifié ce code.

    8
    Dimanche 12 Janvier 2014 à 19:52

    non, justement je ne l'ai ai pas modifier, j'ai tous fait comme tu as fait toi mais sa ne marche pas. Je t'envoie mon code Css pour que tu vois ce qui ne va pas.

    Code Html

    #menu_deroulant ul 
              margin:0;
              padding:0
              list-style-type:none}
    #menu_deroulant li 
              float:left}
    #menu_deroulant li:hover ul li 
              float:none}
    #menu_deroulant ul li ul 
              display:none}
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_navigation li ul 
              position:absolute
              z-index10}
    #menu_navigation
              height20px;  
             background-colorBlack 
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;}
    #menu_deroulant ul li a,
    #menu_deroulant ul li 
              display:block
                 background-colorBlack ;  
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;  
    }
    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li
              displayblock
              ;  
                 background-colorBlack ;  
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;  
    }

     

     

    9
    Lundi 13 Janvier 2014 à 00:13

    Mea Culpa, j'ai changé le nom de l'id dans mon tuto... Voici ton code corrigé (et l'article aussi au passage) :

    HTML

    <div id="menu_deroulant">
    <ul><li>Titre 1
    <ul><li><a href="#">Onglet 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Onglet 3</a></li></ul>
    </li>
    <li>Titre 2
    <ul><li><a href="#">Onglet 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Onglet 3</a></li></ul>
    </li>
    <li><a href="#">Titre 3</a></li>
    </ul>
    </div>

    CSS

    #menu_deroulant ul 
              margin:0;
              padding:0
              list-style-type:none}
    #menu_deroulant li 
              float:left}
    #menu_deroulant li:hover ul li 
              float:none}
    #menu_deroulant ul li ul 
              display:none}
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul 
              position:absolute
              z-index10}
    #menu_deroulant
             height20px;  
             background-colorBlack 
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;}
    #menu_deroulant ul li a,
    #menu_deroulant ul li 
              display:block
                 background-colorBlack ;  
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;  
    }
    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li
              displayblock
              ;  
                 background-colorBlack ;  
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;  
    }

    10
    Lundi 13 Janvier 2014 à 16:27

    Je te remercie, sa marche super bien, par contre je voudrais que mon déroulant soit aligné a son titre, et je n'arrive pas a le mettre. Je te parle de la marge de gauche. J'ai beau le mettre a 0xp sa ne fait rien, es ce que c'est possible de faire - ou pas?

    11
    Lundi 13 Janvier 2014 à 16:44

    Je n'ai pas très bien compris ce que tu veux faire... Essaie avec une marge négative (-5px etc...)

    12
    Lundi 13 Janvier 2014 à 17:18

    En faite, je voudrais que mon déroulant soit juste mit correctement en dessous de son titre sans dépassé et bien alligné, mais le probleme c'est un peu trop collé au titre et un peu trop sur la droite. Je ne c'est pas si tu as bien compris ce que je veut dire sinon passe directement sur mon blog tu verras par toi même

    13
    Lundi 13 Janvier 2014 à 17:23

    Oui, c'est bon, j'ai réussi merci beaucoup. :)

    14
    Lundi 13 Janvier 2014 à 17:24

    Je n'ai pas fait grand chose pour le coup, mais de rien ^^

    15
    Lundi 13 Janvier 2014 à 17:25

    Par contre, j'ai encore un petit problème, quand je fait le code pour la bordure, dans le déroulant sa me met en double alors que je demande juste le contour. Je fait dotted et sa me met en double a l'extérieur et a l'intérieur.

    16
    Lundi 13 Janvier 2014 à 18:36

    Hm, essaie avec ce code :

    #menu_deroulant ul li width50px/*LARGEUR DES TITRES ET ONGLETS*/
        displayblock;
        background-color#8e1717;
        margin3px 10px 5px 3px;
        padding5px 23px 5px 23px;
        text-aligncenter;
        border1px DOTTED #d46464;
        font-size10px;
    }
    #menu_deroulant ul li a
        propriété valeur/*LIENS*/
    }
    #menu_deroulant ul li ul li {
        propriété valeur/*ONGLETS*/
    }

    Tu définies une seule fois l'apparence de tes onglets et titre, ce qui évite que les propriété soient appliquées deux fois (une fois parce que c'est un onglet, et une deuxième fois parce que c'est un lien)

    EDIT : Après un petit test, ajoute ceci pour aligner tes onglets avec tes titres (la marge négative peut être à modifier). Ce code correspond au "bloc" d'onglet.

    #menu_deroulant ul li ul { 
        margin-left-27px/*A MODIFIER POUR ALIGNER*/
        padding-top10px;
    }

    17
    Lundi 13 Janvier 2014 à 20:19

    Merci beaucoup, j'ai enfin réussi a faire ce déroulant, avec un mal de tête épouventable :) mais c'est enfin fini. Encore une fois merci.

    18
    Lundi 13 Janvier 2014 à 20:37
    A oui désolé c'est mon autre pseudo Shoukylove.
    19
    Mardi 14 Janvier 2014 à 20:54

    Bonsoir, :) 

    Désolée de te déranger mais, j'ai un petit problème avec le code. Je veux le mettre en haut mais pas dans un article, je veux qu'il soit comme ça : http://pokelove.eklablog.fr/ 

    Là où il y'a Solution/astuce,  Les dex pokemon ...

    J'ai essayé avec le code que tu as mit, mais ça ne veux pas. o/ 

    Je te remercie d'avance de ton aide :) 

     

    20
    Mardi 14 Janvier 2014 à 21:36

    Pour le placer en haut de la page, il faut que tu utilise le code fourni dans la dernière partie de l'article :

    #menu_navigationheight: Xpx;/*hauteur de la barre*/
        widthXpx/*largeur de la barre*/
        positionabsolute;
        topXpx /*position par rapport au haut de la page*/
        leftXpx/*position par rapport au bord gauche de la page*/    
    }

     

    Le code suivant permet de gérer le groupe d'onglet (ici, un exemple avec un fond rouge et une bordure noire) :

    #menu_navigation ul li ul
        display none;
        backgroundred/*fond rouge*/
        border2px solid black/*bordure noire*/
        propriete valeur;  /*A personnaliser*/ 
    }

    Essaie de bidouiller un peu avec ce code ;)

    21
    Mercredi 15 Janvier 2014 à 14:08

    CSS:

    #menu_deroulant ul 

              margin:0;
              padding:0
              list-style-type:none}
    #menu_deroulant li 
              float:left}
    #menu_deroulant li:hover ul li 
              float:none}
    #menu_deroulant ul li ul 
              display:none}
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul 
              position:absolute
              z-index10}
    #menu_deroulant
             height20px;  
             background-colorBlack 
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;}
    #menu_deroulant ul li a,
    #menu_deroulant ul li 
              display:block
                 background-colorBlack ;  
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;  
    }
    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li
              displayblock
              ;  
                 background-colorBlack ;  
    border1px dotted Grey;
    colorGrey;
    border-radius10px 10px 10px 10px
                  -moz-border-radius10px 10px 10px 10px
                  -webkit-border-radius10px 10px 10px 10px;  

    }

    #menu_navigationheight: Xpx; 100/*hauteur de la barre*/
        widthXpx; 30/*largeur de la barre*/
        positionabsolute;
        topXpx ; 100 /*position par rapport au haut de la page*/
        leftXpx; 20 /*position par rapport au bord gauche de la page*/    
    }

     

    HTML: 

    <div id="menu_deroulant">
    <ul><li>Titre 1
    <ul><li><a href="#">Onglet 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Onglet 3</a></li></ul>
    </li>
    <li>Titre 2
    <ul><li><a href="#">Onglet 1</a></li>
    <li><a href="#">Onglet 2</a></li>
    <li><a href="#">Onglet 3</a></li></ul>
    </li>
    <li><a href="#">Titre 3</a></li>
    </ul>
    </div> 

     

    J'ai beau essayer mais ça ne marche pas o/ 

    22
    Mercredi 15 Janvier 2014 à 18:51

    Quand je marque Xpx, il suffit de remplacer le X par une valeur ;) Le point-virgule indique la fin d'une instruction, donc en notant Xpx ;  100 , ton navigateur ne lit pas le 100.

    #menu_deroulantheight: 30px;/*hauteur de la barre*/
        width: 300px; /*largeur de la barre*/
        positionabsolute;
        top: 100px /*position par rapport au haut de la page*/
        left: 20px;  /*position par rapport au bord gauche de la page*/    
    }

    Voici donc le code corrigé (avec quelques petites modifications : tu aurais eu un étrange résultat avec un menu de 30*100 ^^' )

    23
    Vendredi 17 Janvier 2014 à 18:07

    Ouppss j'ai oublié un 0 :3

    Edit: J'ai un peu modifié le thème ^^ 

    et j'ai un petit soucis, y'a un "cadre" blanc à gauche que je veux enlever mais je ne trouve pas le code, et de plus la page où j'écris mes articles je veux la mettre au centre, puisqu'elle est décalée vers la droite j'ai mis position: center;  

    Mais ça ne marche pas o/ 

    Ps: c'est bon pour les titres ^^ 

    Merci à toi ! ;) 

    24
    Samedi 18 Janvier 2014 à 00:00

    Enleve ton menu de gauche, et essaie de régler manuellement les marges :

    Apparence => Modifier le thème => Format du blog => Menu / Marges

    25
    Samedi 18 Janvier 2014 à 00:03

    Merci beaucoup ^^ 

    Une dernière question, je suis que je suis un peu  pénible :p 

    mais comment mettre le menu déroulant dans toutes les pages ? 

    26
    Samedi 18 Janvier 2014 à 00:25

    Il faut que tu mettes le html dans un module simple

    EDIT : Du coup, si tu veux supprimer le menu de gauche, il va falloir modifier quelques trucs dans ton css ^^'

    Dans un premier temps, laisse ton menu à gauche et transfert le html dans le html d'un module simple pour que ton menu déroulant apparaisse sur toutes les pages. (ne donne pas de titre à ce module)

    Ensuite, dans ton css, il faut que tu rendes ton menu de gauche invisible :

    #menu1 { width : 0px;
    background: none;
    }

    Essaie avec ce code, je n'ai pas le temps de tester pour le moment ^^' Dis moi si ça ne fonctionne pas.

    27
    Samedi 18 Janvier 2014 à 12:43

    Bonjour, 

     ça marche ^^  merci, euh mais pour le menu, je l'ai mit à droite, car la page est bien centré alors que à gauche elle partait à droite. 

    Par contre le menu visiteur n'est plus lisible o/ on ne le voit plus >n<

    Merci encore !

    28
    Samedi 18 Janvier 2014 à 20:56

    Vérifies que tu ne l'ai pas supprimer de ton menu.

    29
    Samedi 18 Janvier 2014 à 23:14

    dans apparence ==> Gérer les menus 

    Il est toujours présent ! 

    30
    Dimanche 19 Janvier 2014 à 11:16

    Retour dans le CSS (à ajouter tout à la fin pour que ce soit les dernières modification prises en compte) :

    #content {
        margin-left150px;
        margin-top30px;
    }

    .module_menu_type_lastvisitors {
        positionfixed;
        top25px;
        margin-left-170px/*A modifier pour ajuster*/
        width100px;
    }

    Normalement, ça devrait marcher :)

     

    31
    Dimanche 19 Janvier 2014 à 11:45

    ça marche impeccable ^^ 

    Merci beaucoup !! 

    32
    Lundi 3 Février 2014 à 09:29

    Je ny comprend rien XD

    33
    Lundi 3 Février 2014 à 21:53

    Hm... Ça me semble difficile de tout réexpliquer  plus simplement XD

    Qu'est-ce que tu ne comprends pas exactement ?

    34
    Mardi 11 Février 2014 à 16:19

    Est-ce qu'il est possible de faire en sorte que le menu se déroule "vers le haut" ?

    35
    Mardi 11 Février 2014 à 18:21

    Il suffit d'utiliser une marge négative ;)

    #menu_navigation ul li ul {
    display: none;
    margin-top: -Xpx;
    }

    36
    Lundi 17 Février 2014 à 17:22

    Merci ^^

    Quel code tu as utilisé pour que seul les angles du bas des onglets soient arrondis ? Moi, j'ai utilisé ce code, mais ça ne fonctionne pas:

    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li{
              display:block;
              background-color: #AAA0B0;
    width: 80px;
    height: 25px;
    border-radius: 0px 0px 30px 30px;}

    Au lieu d'avoir juste un grand onglet avec les angles du bas arrondis, j'ai autant d'onglets que j'ai de liens (Je sais pas trop comment expliquer... Mais en gros, j'ai trois rectangles avec les angles du bas arrondis au lieu d'un seul)

    37
    Lundi 17 Février 2014 à 20:57

    Essaie avec 

    #menu_deroulant ul {propriété : valeur;}

    38
    Mardi 18 Février 2014 à 07:46

    Merci ^^

    39
    Jeudi 20 Février 2014 à 16:34

    Bonjour et bravo à toi. C'est super et quelle générosité de ta part.

    Etant très peu compétent, j'ai recopié je te l'avoue.

    Dans le principe cela fonctionne. Mais j'ai des pbs avec le css, que je ne maîtrise pas. Le menu est à la bonne hauteur, mais trop étroit et la police trop petite. Sur quoi je dois agir pour donner une apparence plus correcte. je te joins l'adresse et le code CSS. Si tu m'aider, je comprends que tu puisses trouver irritant toutes ces questions.

    Merci.

    Tigroudelbungo.

    http://carnetsejours.eklablog.com/

    .divpuzzle  
    {     
       height:62px;  
       width:62px;  
       border: 1px solid darkgrey;  
    }  
    #menu_deroulant ul {
              margin:0;
              padding:0;
              list-style-type:none; }
    #menu_deroulant li {
              float:left; }
    #menu_deroulant li:hover ul li {
              float:none; }
    #menu_deroulant ul li ul {
              display:none; }
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul {
              position:absolute;
              z-index: 10; }
    #menu_deroulant{
             height: 40px;  
             background-color: Black ;
    border: 1px dotted Grey;
    color: Grey;
    border-radius: 10px 10px 10px 10px;
                  -moz-border-radius: 10px 10px 10px 10px;
                  -webkit-border-radius: 10px 10px 10px 10px;}
    #menu_deroulant ul li a,
    #menu_deroulant ul li {
              display:block;
                 background-color: Black ;  
    border: 1px dotted Grey;
    color: Grey;
    border-radius: 10px 10px 10px 10px;
                  -moz-border-radius: 10px 10px 10px 10px;
                  -webkit-border-radius: 10px 10px 10px 10px;  
    }
    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li{
              display: block;
              ;  
                 background-color: Black ;  
    border: 1px dotted Grey;
    color: Grey;
    border-radius: 10px 10px 10px 10px;
                  -moz-border-radius: 10px 10px 10px 10px;
                  -webkit-border-radius: 10px 10px 10px 10px;  
    }
    #menu_deroulant{
              height: 30px;   
              width: 300px;   
              position: absolute;
              top: 210px ;   
              left: 400px;   
    }
     
     

     

     

    40
    Jeudi 20 Février 2014 à 19:30

    Je ne comprend plus à partir du moment de la personnalisation...

    41
    Vendredi 21 Février 2014 à 09:27

    Bonjour Gaelle,

    C'est bien mon pb.Comment augmenter la taille des caractères du menu et bien separer le differents titres du menu.

    Je vais devoir me mettre dans les docs et tutos css personnalisation.

    Merci d'avoir regardé.

    42
    Vendredi 21 Février 2014 à 17:58

    @ Tigrou :

    #menu_deroulant ul li { width : Xpx; /*largeur des onglets*/
    height : Xpx; /*hauteur des onglets*/
    padding: 4px; /*marge interrieur*/
    font-size: Xpx; /*taille de la police*/
    }

    Voici quelques exemples pour gérer l'apparence des onglets de manière uniforme.

    @ Gaelle : Pour pouvoir personnaliser, il faut utiliser des propriété CSS avec les sélecteurs fournis.

    => http://fanstasy-graph.eklablog.net/introduction-a4961842

    Quelques propriétés sont expliqués sur le blog, mais tu peux également rechercher sur internet ;)

    => http://fanstasy-graph.eklablog.net/css-c937827 [4ème boite : "Propriété"]

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    43
    Vendredi 21 Février 2014 à 18:44

    Ok, il faut que je réfléchisse !

    44
    Vendredi 21 Février 2014 à 22:14

    Merci de ta réponse, je reprends tout cela demain matin après passage à la bibliothèque pour trouver un livre sur le css.

    Bonne soirée.

     

    45
    Lundi 3 Mars 2014 à 10:38

    J'ai encore une question >.<

    Comment est-ce que tu fais pour que les titres soient "au centre" des onglets ?

    46
    Lundi 3 Mars 2014 à 11:51

    Bonjour, comment enlever "L'étage" sur mon menu ?

    Et aussi, avec :

     #menu_navigationheight: 30px;
        width: 30px;
        positionabsolute;
        top: 10% ;
        left: 50%; }

     

    Le menu reste dans mon module...

    Que faire ? Merci en avance !

    47
    Mardi 4 Mars 2014 à 18:56

    1 - Comment ça "l'étage" ?

    2 - Ton sélecteur en HTML ne serait-il pas "menu_deroulant" ? Si tu as réutilisé les commentaire, vérifie que le nom du sélecteur est le même partout ;)

    48
    Mardi 4 Mars 2014 à 19:19

    Je pense que tu ne m'as pas vu, donc je repose ma question ^^

    Comment est-ce que je dois faire pour que mes titres soient au centre de mes onglets ? (Quand l'onglet descend, j'aimerais que le titre soit bien alignés avec l'onglet, et pas sur la droite) ^^

    49
    Mardi 4 Mars 2014 à 19:40

    Oups, sorry ^^'

    Essaie avec :

    #menu_deroulant ul li ul li { text-align: center;}

    50
    Mercredi 5 Mars 2014 à 09:10

    Bonjour, j'ai un peu de mal avec ce menu déroulant... Voilà ce que j'ai :

    Menu déroulant

    Je ne sais pas comment mettre le titre visible et les onglets visibles au survol au centre ! Et aussi, je voudrai agrandir les onglets visibles au survol ...

    Mon code :

    #menu_deroulant ul {
              margin:10;
              padding:10;
              list-style-type:none; }
    #menu_deroulant li {
              float:left; }
    #menu_deroulant li:hover ul li {
              float:none; }
    #menu_deroulant ul li ul {
              display:none; }
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul {
              position:absolute;
              z-index: 10; }
    #menu_deroulant{
             height: 25px;  
             background-color: #FEC8D0 ;
    border-radius: 10px 10px 10px 10px;
                  -moz-border-radius: 10px 10px 10px 10px;
                  -webkit-border-radius: 10px 10px 10px 10px;}
    #menu_deroulant ul li a,
    #menu_deroulant ul li {
              display:block;
                 background-color: #FEC8D0 ;  
    border-radius: 10px 10px 10px 10px;
                  -moz-border-radius: 10px 10px 10px 10px;
                  -webkit-border-radius: 10px 10px 10px 10px;  
    }
    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li{
              display: block;
              ;  
                 background-color: #FEC8D0 ;  
    border-radius: 10px 10px 10px 10px;
                  -moz-border-radius: 10px 10px 10px 10px;
                  -webkit-border-radius: 10px 10px 10px 10px;  
    }

     

    Merci d'avance ! >.<

    51
    Mercredi 5 Mars 2014 à 13:03

    Ce n'est pas grave, j'ai abandonné (Hé oui, je suis un chat qui abandonne vite.)

    Mais j'ai compris mon erreur ;) Alors si je me relance, je sais quoi faire ! Merci beaucoup quand même :)

    52
    Mercredi 5 Mars 2014 à 14:48

    Ça marche pas... :/ Voilà mon code:

    #titre_header a {
                              display: block;
                              width: 1000px;
                              height: 302px;}
    #menu_deroulant ul {
              margin:0;
               padding:0;
               list-style-type:none; }
    #menu_deroulant li {
              float:left; }
    #menu_deroulant li:hover ul li {
              float:none; }
    #menu_deroulant ul li ul {
              display:none; }
    #menu_deroulant ul li:hover ul {
              display:block;}
    #menu_deroulant li ul {
              position:absolute;
              z-index: 10; }
    #menu_deroulant{
              height: 20px;
        width: 565px;
              border: 1px solid black;
    position: absolute;
              top: 310px ;
              left: 43%;
    background-color: #e2e2e2;
        border-radius: 2px;
                  -moz-border-radius: 2px;
                  -webkit-border-radius: 2px;
    box-shadow: 0px 0px 8px #FCFCF5;}
    #menu_deroulant ul li a,
    #menu_deroulant ul li {
              display:block;
    color: #0A0A40;}
    #menu_deroulant ul li ul li a,
    #menu_deroulant ul li ul li{
              display:block;
    width: 80px;
    height: 25px;}
    #menu_deroulant ul {border-radius: 0px 0px 20px 20px;
    background-color: #e2e2e2;
    box-shadow: 0px 0px 8px black;}
    #menu_deroulant ul li ul li { text-align: center;}

     

    53
    Vendredi 14 Mars 2014 à 14:15

    Bonjour, super boulot et très simple à comprendre mais j'aurais voulu savoir si il était possible de rajouter d'autres menu ? Car votre exemple s'arrête au Titre 3. Comment faire pour rajouter un Titre 4 - 5 et 6 toujours déroulant? 

    Merci d'avance, Bonne journée! 

    54
    Vendredi 14 Mars 2014 à 15:30

    @Aykia : Qu'est-ce qu'il ne marche pas ?

    @Teamfrance : Il suffit d'ajouter ceci pour chaque nouveau titre:

    <li>Titre X
                  <ul>
                       <li> Onglet 1 </li>
                       <li> Onglet 2 </li>
                       <li> Onglet 3 </li>
                  </ul>
    </li>

    55
    Vendredi 14 Mars 2014 à 19:21

    D'accord merci. Est-il possible de faire un sous-sous menu je ne sais pas trop comment appeler ça mais par exemple aprés:

    • Titre X

    Onglet 1 - (faire encore un autre sous menus ?) - Onglet 1

                                                                          - Onglet 2

    Onglet 2

    56
    Samedi 15 Mars 2014 à 10:21

    Et bien lorsque l'onglet apparaît, le titre est à droite, et pas au centre comme je le voudrais :S

    Par exemple là, mon curseur est sur "Blog".

    57
    Samedi 15 Mars 2014 à 15:25

    @TeamFrance : Dans l'idée, voici ce que tu dois mettre dans ton HTML

    <li>Titre X
                 <ul>
                      <li> Onglet 1 </li>
                            <ul>
                                  <li>Sous-Onglet 1</li>
                                  <li>Sous-Onglet 2</li>
                            </ul>
                      <li> Onglet 2 </li>
                      <li> Onglet 3 </li>
                 </ul>
    </li>

    Ensuite dans le CSS, il faut faire la même manip' que pour faire apparaitre et masquer les onglets, mais un cran plus loin :

    #menu_deroulant ul li ul li ul li{
          display: none; /*masque les sous-onglets */
          position: absolute;
          top: -Xpx; /* permet de remonter les sous-onglet */
          left: Xpx; /* place les sous-onglet à gauche de l'onglet */
    }

    #menu_deroulant ul li ul li:hover ul li{
          display: block; /*affiche les sous-onglets */
    }

     

    @Aikya : Il faut définir la largeur de tes titres :

    #menu_deroulant ul li {
              display:block;
              width: Xpx;  /*largeur*/
              text-align: center; /*alignés au centre*/
    }

    58
    Samedi 15 Mars 2014 à 15:44

    Merci ;)

    59
    Lundi 17 Mars 2014 à 23:26

    D'accord merci, sauf que ça ne marche pas. Êtes-vous sur qu'il ne faut pas que je change ou que j'ajoute un code CSS en plus ?

    Merci d'avance.

    60
    Mardi 18 Mars 2014 à 10:16

    Il faut bien rajouter du CSS, le code se trouve dans mon post précédant. Cependant, essayez avec celui-ci qui me semble plus simple :

    #menu_deroulant ul li ul li ul li{ display: none; /*masquer les sous-onglets*/
    }
    #menu_deroulant ul li ul li:hover ul li{ display: block; /* afficher les sous-onglets*/
    }

    #menu_deroulant ul li ul li ul {    margin-left: Xpx;
       margin-top: -Xpx;
    }

    61
    Donim
    Jeudi 17 Avril 2014 à 01:03

    Bonjour,

    Pourriez-vous m'aider ? svp En temps que débutante, je viens de créer mon premier blog avec Blogger. J'ai pris le modèle Picture windows personnalisé avec une image plein écran prise dans mon PC . Modèle mise en page à 3 colonnes transparent. J'ai installé Google Chrome. Je n'arrive pas à insérer les codes menus/onglets coulissants .... Est-ce compatible ? J'ai internet Explorer. Dois-je rentrer tous les codes CSS et HTML dans un même gadget ou ailleurs... ?

    Le genre ressource, encyclopédie ... sur la gauche de l'écran me plait beaucoup, mais seule , cela me semble impossible à réaliser!

    J'aurai besoin  dans mon menu principal  de  :  Accueil  - Bibliothèque ( articles, romans, poésie, bandes dessinées- les auteurs - magazines -les nouvelles )  Vidéothèque - Musée

    Par avance merci . Cdlt . Donim

    62
    Jeudi 15 Mai 2014 à 13:54
    Bonjour,
    J'aimerai placer un menu déroulant sur mon blog mais le hic est que lorsque je copie le code dans ma feuille "CSS" dans le menu "Modifier le thème" ça affiche que le code est incorrecte. Et cela s'affiche quand je place le code HTLM. Ou dois-je placer le code HTLM ailleurs que dans la feuille CSS ??

    EDIT: J'aurai dû être plus attentive, je viens de trouver la solution lol :)
    63
    Jeudi 15 Mai 2014 à 14:00

    On ne peux écrire que du CSS dans la feuille CSS.

    Sur EklaBlog on peux écrire du HTML dans un article ou dans un module en cliquant sur l'icone < >

    64
    Jeudi 15 Mai 2014 à 20:02

    Oui mais ça c'est pour un article, moi je parlais pour le cas du blog en entier ! :)

    65
    Jeudi 15 Mai 2014 à 23:06

    " Sur EklaBlog on peux écrire du HTML dans un article ou dans un module en cliquant sur l'icone < > "

    Le HTML écrit dans un module simple sera visible sur tout le blog, puisque le module en question apparait dans toutes les pages

    66
    Jeudi 15 Mai 2014 à 23:14

    Ah d'accord, je pensais que je devais écrire le code dans un fichier txt puis convertir en htlm puis l'hebeger dans "Gestions des fichiers"

    67
    Vendredi 23 Mai 2014 à 11:55

    Je ne comprend pas bein la partie Personalistaion (CSS). Quelqu'un pourrait me réexpliquer ?

    68
    Vendredi 23 Mai 2014 à 12:13

    C'est pour gérer l'apparence du menu.

    Si tu utilise le code complet HTML (le dernier) ainsi que le premier CSS (celui à ne pas modifier), tu as déjà un menu qui fonctionne, mais l'affichage n'est pas super... Tu peux déjà essayer avec ces deux code pour voir ce que ça donne ;)

    Les 3 autres codes CSS correspondent aux différents élément du menu (la barre qui contient les titres, les titres et les onglets) Pour leur définir par exemple une couleur de fond, des bordures...

    69
    Vendredi 23 Mai 2014 à 14:23

    Oui, masi ej ne comprend pas bien quand il y a marqué /*personaliser*/ peux tu me donner un exemple pour completer ?

    70
    Vendredi 23 Mai 2014 à 15:31

    Il faut compléter avec des propriété (voir ici)

    Pour exemple, je prends le deuxième code CSS qui correspond à la "barre" contenant les titres :

    #menu_deroulant{
             height: Xpx;  /*définissez sa hauteur*/
             propriété : valeur;  /*personnalisez*/
    }

    Ce qui est écrit entre /*...*/ sont des commentaires pour vous aider à vous y retrouver dans le code, mais il n'ont pas pas d'influence sur celui-ci.

    Pour la propriété height (hauteur) je remplace X par un nombre pour définir la hauteur de cette barre. Disons 20

    #menu_deroulant{ 
             height: 20px;  /*hauteur de 20px*/
             propriété : valeur;  /*personnalisez*/
    }

    A la place de propriété : valeur; je peux mettre n'importe quelle propriété. Par exemple, si je veux mettre un fond jaune, je mettrais le code suivant :

    #menu_deroulant{ 
             height: 20px;  /*hauteur de 20px*/
             background : yellow;  /*fond jaune*/
    }

     

    71
    Vendredi 23 Mai 2014 à 17:34

    A je comprend déjà mieux maintenant, merci beaucoup !

    72
    Mardi 3 Juin 2014 à 16:39

    Que de bons conseils

    Merci beaucoup

    73
    Samedi 21 Juin 2014 à 19:12

    Merci beaucoup pour cet article, très sympa de ta part pour ce partage :)

    74
    Vendredi 18 Juillet 2014 à 11:27

    Ah, que c'est compliqué, je n'arrive pas ! Je n'arrive pas et je suis nulle en informatique... Je vais essayer d'y reccomencer

    75
    Vendredi 8 Août 2014 à 14:13

    Oh merci je le cherchais ! :)

    76
    Jeudi 28 Août 2014 à 14:23

    J'y suis arrivée ! Le seul souci est que le menu n'est pas assez large et il est petit, et puis la couleur des onglets ne correspond pas à celle du menu...

     

    77
    Dimanche 28 Septembre 2014 à 20:53

    Merci beaucoup pour ces codes, ils sont super !

    78
    Samedi 4 Octobre 2014 à 20:19

    Merci pour ce tuto !

    Après six jours, j'ai enfin réussi à faire exactement ce que je voulais ! J'aiiiime !! :D

    79
    Vendredi 23 Janvier 2015 à 20:58

    Bonjour, alors voila je suis harchi nul en htlm et css, et donc je voulais te demander ce que ca voulais dire "1- Créez une div avec un id pour pouvoir plus facilement travailler dessus en CSS" merci :)

    80
    Mardi 10 Février 2015 à 20:26

    Merci beaucoup pour ce code !!!! x) !

    81
    Dimanche 15 Février 2015 à 11:43

    Bonjour, mon menu déroulant ne marche pas sur google chrome, comment je fait ?

    Il marche très bien sur firefox. 

    C'est un peu le bordel hein :')

    #menu_deroulantpositionabsolute
          top200px;
           min-width100%;
          width100%/*largeur du menu*/
          height40px;
          backgroundwhite;
          border-top1px solid rgba(0,0,0,0.1);
        box-shadow0px 3px 5px rgba(0,0,0,0.5);
        z-index1;
        background-positioncenter;
       
        
    }


    #menu_deroulant.fixe positionfixed
          top30px;
       }

    #menu_deroulant ul 
              margin:0;
              padding:0
              list-style-type:none;
    }
    #menu_deroulant li 
              float:left;
    }
    #menu_deroulant li ul li 
              float:none;
    #menu_deroulant ul li ul 
        visibility:hidden;
        -webkit-transition0.1s;
        -webkit-transformscale(10translate(0px-100px);
    }
    #menu_deroulant ul li:hover ul {
              display:block;
        visibility:visible;
        float:none;
        -webkit-transformscale(1translate(0px1px),

    #menu_deroulant li ul 
              position:absolute
              z-index10}


    #menu_deroulant width800px;
        left50%;
        margin-left-400px;
        positionabsolute;
        height25px;
    }
    #menu_deroulant ul li 
        display:block
        width185px;
        font-size15px;
        padding-top5px;
    }
    #menu_deroulant ul li:hover {background#999999;
        opacity1;
    }
    #menu_deroulant ul li a:hover colorblack;
    }
    #menu_deroulant ul {background #999999;
        box-shadow0px 3px 3px rgba(0,0,0,0.5);
        
    }

    #menu_deroulant ul li ul li {font-size14px;
        text-align:  center;
        width170px;
        font-size12px;
        padding5px;
        padding-left10px;
        border-bottom1px solid rgba(0,0,0,0.05);
        
    }
    #menu_deroulant ul li ul li:hoverbackground:#f44850 ;
    }
    #menu_deroulant ul li ul li <span class="css-punctuation" style="color: #666666; font-family: m

    82
    Dimanche 29 Mars 2015 à 16:26

    Bonjour, où devrais-je mettre le html s'il vous plaît?

    83
    Mercredi 8 Avril 2015 à 17:35

    Bonjour, 

    Je suis en train d'essayer de créer un menu, mais j'aimerais que quand on survole un titre les sous-titres ne s'affichent pas instantanément mais en se déroulant (Comme le bandeau Graphisme Codage Etc de ce blog). Étant un peu novice en matière de codage, je ne sais pas du tout quoi faire. Pourriez-vous m'aider ? 

    (Merci de votre patience et pour le tutoriel très bien expliqué ;D) 

    84
    Mardi 12 Mai 2015 à 18:15

    (Peut-être trop tard pour répondre ^^"")

    Webmaster-number-one :

    Iolka : Utilise une transition ;-)

    http://fanstasy-graph.eklablog.net/transition-a23033460

    85
    Mercredi 13 Mai 2015 à 19:39

    Merci.

    86
    Mercredi 13 Mai 2015 à 22:14

    De rien

    87
    Mardi 9 Février 2016 à 17:57

    Merci pour ce tuto ; il m'a bien servi !

    88
    Dimanche 29 Mai 2016 à 20:59

    salit je vient de découvrir ton blog et il est vraiment génial

    voila je suis une cruche ds l informatique, je tient un blog de covers  (http://alittlecoversbyazalia.eklablog.com/) et j aimerai un menu déroulant  mais je n y arrive pas

    peut tu m en créer un si tu a le temps bien sur

    voila l idée

     

    Korea covers                  Japan covers              China ,Taiwan , Ect covers

    KDrama                         JDrama                       Drama

    Web Drama                   Web Drama                  Web drama

    Movie                            Movie                         Movie

    KProgramm

     

    merci d avance 

    si tu ne sais pas ce n est pas grave bon wk et longue vue a ton blog

     

    89
    Vendredi 5 Août 2016 à 17:11

    Vraiment cool ce code. :D Le problème, c'est que je n'arrive pas à mettre de transition lorsque le menu se déroule, pourtant j'ai essayé partout, comment faire ? 

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :