AccueilRechercherS'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 : 36Messages : 1159

    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. ^^
    Ahleya
    Ahleya
    FémininAge : 26Messages : 23

    Sam 26 Jan 2013 - 19:26

    Je suis curieuse xP
    Merci ^^



    Menu à deux niveaux - Page 2 Asign
    Platypus
    Platypus
    MasculinAge : 24Messages : 11

    Dim 3 Fév 2013 - 18:57

    S'il te plaaaaait ! *O*
    Anonymous
    Invité

    Lun 4 Fév 2013 - 2:24

    Merci ! =)
    black . Devil
    black . Devil
    FémininAge : 31Messages : 37

    Lun 4 Fév 2013 - 15:49

    merci
    Lady Doll
    Lady Doll
    FémininAge : 32Messages : 101

    Dim 10 Fév 2013 - 15:51

    merci =)
    Grande
    Grande
    FémininAge : 33Messages : 207

    Dim 10 Fév 2013 - 16:06

    Merci



    Menu à deux niveaux - Page 2 171074gwenj10
    Miyun
    Miyun
    FémininAge : 23Messages : 34

    Dim 17 Fév 2013 - 8:48

    Thanksss :) :friends:



    Menu à deux niveaux - Page 2 907096miu
    Cyllan
    Cyllan
    FémininAge : 31Messages : 166

    Dim 17 Fév 2013 - 10:19

    Trop bien ** Merci \o/



    Menu à deux niveaux - Page 2 1388311800-signa-anesthesiee
    mikalus
    mikalus
    MasculinAge : 50Messages : 92

    Dim 17 Fév 2013 - 10:28

    Marci belle ange...



    Menu à deux niveaux - Page 2 766500banpub
    Minkumi
    Minkumi
    FémininAge : 28Messages : 31

    Lun 25 Fév 2013 - 18:24

    Merci beaucoup ! Je cherchais justement comment faire cela :)
    Dragma
    Dragma
    MasculinAge : 26Messages : 65

    Mar 26 Fév 2013 - 3:36

    Merci !

    Hazard19
    Hazard19
    MasculinAge : 33Messages : 2

    Mer 27 Fév 2013 - 18:54

    Merci
    Ireth
    Ireth
    FémininAge : 29Messages : 20

    Jeu 28 Fév 2013 - 4:01

    Merci beaucoup !
    Lilie
    Lilie
    FémininAge : 38Messages : 190

    Jeu 28 Fév 2013 - 20:04

    Merciii :)
    Cytrius
    Cytrius
    FémininAge : 21Messages : 233

    Jeu 28 Fév 2013 - 20:17

    Merci !!!
    Lilwik
    Lilwik
    FémininAge : 22Messages : 10

    Sam 16 Mar 2013 - 12:42

    Merci. :)
    poussette59
    poussette59
    FémininAge : 36Messages : 175

    Sam 16 Mar 2013 - 18:47

    coucou et meriii beaucoup =)
    Tamashi
    Tamashi
    MasculinAge : 26Messages : 57

    Lun 18 Mar 2013 - 5:41

    merci XD
    Likilou
    Likilou
    MasculinAge : 28Messages : 307

    Lun 18 Mar 2013 - 18:37

    Thanks



    Menu à deux niveaux - Page 2 707828SignArthur2
    Ryuu
    Ryuu
    FémininAge : 27Messages : 61

    Jeu 21 Mar 2013 - 2:26

    Merci :3



    Jimmy
    Jimmy
    MasculinAge : 26Messages : 166

    Sam 23 Mar 2013 - 16:40

    Merci !
    Sparky59
    Sparky59
    FémininAge : 21Messages : 54

    Mer 27 Mar 2013 - 21:02

    Merci ^^
    Imari
    Imari
    FémininAge : 38Messages : 68

    Sam 30 Mar 2013 - 11:32

    Merci beaucoup pour ce code :love:



    Menu à deux niveaux - Page 2 2mzbax4
    Gingka Hagane
    Gingka Hagane
    MasculinAge : 23Messages : 25

    Sam 30 Mar 2013 - 11:51

    Merci
    Yuuna
    Yuuna
    FémininAge : 26Messages : 19

    Sam 30 Mar 2013 - 18:47

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 30 Nov 2021 - 15:52