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.

Le deal à ne pas rater :
OCEANIC Ventilateur sur pied – Hauteur réglable – Oscillation ...
21.99 €
Voir le deal

    Menu à deux niveaux

    Angelusia
    Angelusia
    FémininAge : 36Messages : 1159

    Sam 3 Nov 2012 - 13:21


    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. ^^
    Gravity
    Gravity
    MasculinAge : 23Messages : 2370

    Sam 3 Nov 2012 - 13:25

    merci ange :)



    Menu à deux niveaux 1492519401-bg-copie
    Chucky'
    Chucky'
    MasculinAge : 23Messages : 80

    Mar 6 Nov 2012 - 23:42

    Merci jack6


    Dernière édition par Chucky' le Sam 1 Déc 2012 - 18:21, édité 1 fois



    Menu à deux niveaux 1370524847-cooltext1062715975
    Sparrow-style
    Sparrow-style
    FémininAge : 36Messages : 32055

    Mer 7 Nov 2012 - 0:49

    Merci de partager tes connaissances Wink



    sign
    Angelusia
    Angelusia
    FémininAge : 36Messages : 1159

    Mer 7 Nov 2012 - 0:53

    Mais de rien, Captain' !

    Je tenterais de mettre d'autres tutos dans les jours prochains !
    Glorious
    Glorious
    MasculinAge : 31Messages : 84

    Jeu 8 Nov 2012 - 19:20

    Merci
    Electro
    Electro
    FémininAge : 25Messages : 30

    Ven 23 Nov 2012 - 15:22

    merci pour cela
    Maguitte2008
    Maguitte2008
    FémininAge : 38Messages : 46

    Mer 28 Nov 2012 - 15:36

    Merci
    Mile
    Mile
    FémininAge : 23Messages : 20

    Sam 1 Déc 2012 - 12:05

    Thank's
    Ratatouille
    Ratatouille
    FémininAge : 27Messages : 26

    Ven 7 Déc 2012 - 16:25

    merci!
    Pwaar
    Pwaar
    FémininAge : 26Messages : 107

    Dim 9 Déc 2012 - 15:58

    Oh c'est original °°

    Merci beaucoup du partage !
    Plume'
    Plume'
    FémininAge : 23Messages : 166

    Mar 11 Déc 2012 - 18:50

    Merci !
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 30Messages : 144

    Mer 12 Déc 2012 - 12:28

    merciii



    Menu à deux niveaux Signa10
    Syra
    Syra
    FémininAge : 28Messages : 72

    Mar 25 Déc 2012 - 18:39

    Merci =3



    Febrilis
    Febrilis
    FémininAge : 71Messages : 8

    Ven 28 Déc 2012 - 12:01

    Merci beaucoup. :)
    Teseu
    Teseu
    MasculinAge : 26Messages : 54

    Jeu 3 Jan 2013 - 19:11

    Merci
    Ohani
    Ohani
    FémininAge : 34Messages : 43

    Ven 4 Jan 2013 - 5:49

    Merci ^^



    Menu à deux niveaux Signizt
    VELP
    VELP
    MasculinAge : 26Messages : 8

    Mer 9 Jan 2013 - 0:13

    Merci Wink
    Ange09
    Ange09
    FémininAge : 29Messages : 66

    Mer 9 Jan 2013 - 19:54

    Merci !!
    Kaleidoscope
    Kaleidoscope
    FémininAge : 22Messages : 38

    Sam 12 Jan 2013 - 22:27

    Merci, ça peut toujours servir. :3



    Menu à deux niveaux 553970miku1
    Sacagawea
    Sacagawea
    FémininAge : 25Messages : 236

    Dim 13 Jan 2013 - 5:12

    Merci Angelusia du partage! :gentleman:
    Sephy
    Sephy
    FémininAge : 27Messages : 139

    Lun 14 Jan 2013 - 18:12

    merci!
    sédatif
    sédatif
    MasculinAge : 31Messages : 27

    Dim 20 Jan 2013 - 20:39

    merci
    SugarBuse
    SugarBuse
    FémininAge : 23Messages : 44

    Jeu 24 Jan 2013 - 19:24

    Miciii !
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 29Messages : 76

    Ven 25 Jan 2013 - 16:39

    Merci pour l'astuce :)



    Menu à deux niveaux Bannol1xj5
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Juin 2021 - 1:36