AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Menu à deux niveaux

    Angelusia
    Angelusia
    FémininAge : 34Messages : 1159

    le Sam 3 Nov 2012 - 13:21

    Rappel du premier message :


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Bonjour : )

    Je vous propose mon premier tutoriel : le menu à deux niveaux.

    Cela ressemble à ceci. : )



    Ce n'est pas difficile à faire.

    Mais pour le voir, il faut le mot magique : )




    Pour le recréer, il faut tout d'abord faire créer le Html du menu.

    Qui se présente ainsi.

    Code:
     <ul id="menu_horizontal">
              <li>
                                 <a href="#">Menu 1</a>
                 <ul class="sous_menu">
                    <li>
                       <a href="#">Sous Menu A.1</a>
                        <ul class="sous_sous_menu">
                              <li><a href="#">Sous Sous Menu 1.1.1</a></li>
                             <li><a href="#">Sous Sous Menu 1.1.2</a></li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">Sous Menu 1.2</a>
                        <ul class="sous_sous_menu">
                              <li><a href="#">Sous Sous Menu 1.2.1</a></li>
                             <li><a href="#">Sous Sous Menu 1.2.2</a></li>
                       </ul>
                   </li>
                   <li><a href="#">Sous Menu 1.3</a></li>
                 </ul>
             </li>      
             <li>
                                 <a href="#">Menu 2</a>
                 <ul class="sous_menu">
                    <li>
                       <a href="#">Sous Menu 2.1</a>
                        <ul class="sous_sous_menu">
                              <li><a href="#">Sous Sous Menu 2.1.1</a></li>
                             <li><a href="#">Sous Sous Menu 2.1.2</a></li>
                       </ul>
                   </li>
                   <li><a href="#">Sous Menu 2.2</a> </li>
                   <li><a href="#">Sous Menu 2.3</a> </li>
                </ul>
             <li><a href="#">Menu 3</a></li>
          </ul>

    Ensuite il faut faire le css.

    Tout d'abord on va s'intéresser au fond.

    On lui met un background, un width, une bordure et pourquoi pas des bords arrondis.

    Ce qui nous donnerait.


    Code:
    ul#menu_horizontal {
    background-color: Votre couleur;
     -moz-border-radius: votre taille;
      border:  votre taille votre couleur votre style;
      border-radius:  votre taille;
    width: votre largeur;
    height: votre hauteur;
    }

    On souhaiterait que le menu reste en horizontal et sans marge et aussi centré.

    On rajoute ceci.

    Code:
    margin: 0 auto;
    display: inline-block;

    Maintenant, nous regarderons l'apparence du menu visible. On aimerait enlever les puces et faire en sorte qu'une couleur apparaisse en hover. On procède ainsi.

    Code:
    ul#menu_horizontal li {
    list-style: none;
    }

    ul#menu_horizontal li:hover {
    background-color: votre couleur;
    display: block;
    }

    On peut s'intéresser à l'apparence. Pour cela, à votre goût vous pouvez soit mettre des marges, soit des paddings. Ce qui donnerait.

    Code:
    ul#menu_horizontal li {
    float: left;
    padding: votre taille;
    font-variant: small-caps;
    font-size: votre taille;
    list-style: none;
     
    }

    ul#menu_horizontal li:hover {
    background-color: votre couleur;
    display: block;
    }


    ul#menu_horizontal li a{
    color: votre couleur;
    text-decoration: none;
    padding: votre padding;
    }

    Cette fois, nous nous intéresserons maintenant au premier niveau. Il n'est pas si différent de ce que vous avez déjà réalisé au préalable. La chose qui le différencie, c'est qu'il faut faire gaffe qu'il apparaisse que lorsque on pose sa souris sur le menu visible.

    Ceci se fait grâce à une manipulation que vous verrez dans le css.

    Code:
    ul#menu_horizontal li .sous_menu {display: none;}

    ul#menu_horizontal li:hover .sous_menu {
    display: block;
    text-align: votre alignement;
    position: votre position; (je vous conseillerais absolute)
    margin-left: votre marge négative ou positive;
    margin-top: votre marge;
    width: votre largeur;
    padding: votre padding;
    background-color: votre couleur;
    }

    Nous arrivons à la dernière étape. Le niveau deux... Si on ne fait pas attention à son codage, il apparaîtra lorsque vous posez votre souris sur le menu visible. Et c'est ce que nous souhaitons éviter.

    Pour éviter ce problème, je vous conseille de bien regarder la class. Il y a deux ul et deux li.

    Code:
    ul#menu_horizontal li ul li .sous_sous_menu {display: none;}

    ul#menu_horizontal li ul li:hover .sous_sous_menu {
    width: votre largeur;
    display: block;
    padding: votre padding;
    text-align: votre alignement;
    position: absolute;
    margin-left: votre marge;
    margin-top: votre marge;
    background-color: votre couleur;
    float: votre float;
    }

    Vous pourrez en faire un vous même et avec votre propre goût personnel. ^^
    Rozenbrez
    Rozenbrez
    FémininAge : 27Messages : 1383

    le Dim 28 Juil 2013 - 14:47

    C'est ce que je recherche merciii Very Happy

    katia06
    katia06
    FémininAge : 50Messages : 203

    le Lun 29 Juil 2013 - 8:58

    veux voir, merci



    Amera
    Amera
    FémininAge : 26Messages : 67

    le Mar 30 Juil 2013 - 11:41

    Merci !



    Menu à deux niveaux - Page 4 734690sign1
    Toutankhamon
    Toutankhamon
    MasculinAge : 30Messages : 77

    le Mer 31 Juil 2013 - 22:55

    merci
    Lolo
    Lolo
    MasculinAge : 29Messages : 17

    le Sam 19 Oct 2013 - 12:02

    Merci d'avance !
    Sento Baionoido
    Sento Baionoido
    MasculinAge : 23Messages : 12

    le Mer 30 Oct 2013 - 7:29

    Patate ! euh non Merci
    Evydence
    Evydence
    FémininAge : 22Messages : 60

    le Ven 1 Nov 2013 - 1:00

    Mercii
    ( Lou' )
    ( Lou' )
    FémininAge : 23Messages : 108

    le Mer 29 Jan 2014 - 21:45

    Merci =)
    patriciadpt30
    patriciadpt30
    FémininAge : 56Messages : 240

    le Sam 1 Fév 2014 - 11:17

    merci beaucoup



    Patricia :)
    Databar
    Databar
    MasculinAge : 25Messages : 142

    le Jeu 13 Fév 2014 - 17:25

    merci
    Isalia
    Isalia
    FémininAge : 19Messages : 125

    le Sam 8 Mar 2014 - 12:05

    Je cherchais ♥ Merci ♥
    shibari
    shibari
    MasculinAge : 23Messages : 277

    le Dim 9 Mar 2014 - 13:42

    merci



    Menu à deux niveaux - Page 4 140117011601839279

    Merci Dakota pour ce kit.
    avatar
    Hiddle
    FémininAge : 18Messages : 20

    le Dim 16 Mar 2014 - 17:29

    Graciasss.
    tenderness
    tenderness
    FémininAge : 25Messages : 54

    le Ven 21 Mar 2014 - 16:08

    Merci ♥
    Dooh-Nem
    Dooh-Nem
    FémininAge : 26Messages : 139

    le Mar 1 Avr 2014 - 15:39

    merci
    Ryuu
    Ryuu
    FémininAge : 25Messages : 61

    le Jeu 3 Avr 2014 - 23:58

    Merci



    tamanegeek
    tamanegeek
    MasculinAge : 20Messages : 167

    le Dim 4 Mai 2014 - 11:42

    Merci
    Pandawan
    Pandawan
    FémininAge : 21Messages : 30

    le Dim 4 Mai 2014 - 13:30

    Thanks ~
    Chocolakato
    Chocolakato
    FémininAge : 29Messages : 796

    le Mer 21 Mai 2014 - 21:54

    Merci



    Tweety
    Tweety
    FémininAge : 25Messages : 48

    le Ven 23 Mai 2014 - 0:29

    Merci pour le tuto  :hug: 
    Pirouly
    Pirouly
    FémininAge : 18Messages : 17

    le Ven 30 Mai 2014 - 13:48

    Merci, je cherche ça depuis si longtemps... *-*
    isKeiko
    isKeiko
    FémininAge : 24Messages : 29

    le Mer 2 Juil 2014 - 17:18

    Merci Very Happy
    Damogen
    Damogen
    MasculinAge : 22Messages : 8

    le Sam 12 Juil 2014 - 20:36

    Merci ^^



    Menu à deux niveaux - Page 4 Ye2k
    InkBoy
    InkBoy
    MasculinAge : 26Messages : 66

    le Dim 27 Juil 2014 - 8:39

    Merci pour cette astuce !



    Menu à deux niveaux - Page 4 351tqox
    avatar
    Drogba JR
    MasculinAge : 26Messages : 88

    le Mer 6 Aoû 2014 - 21:30

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 20 Juin 2019 - 9:12