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

    Partagez
    avatar
    Angelusia
    FémininAge : 32Messages : 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. ^^
    avatar
    Coconut Dynamite
    FémininAge : 24Messages : 149

    le Sam 30 Mar 2013 - 21:14

    Intéressant omme tuto', merci pour le partage !



    avatar
    lapinette
    FémininAge : 29Messages : 28

    le Dim 31 Mar 2013 - 9:17

    miciiiii :love:
    avatar
    Shaoran
    MasculinAge : 25Messages : 9

    le Lun 1 Avr 2013 - 11:40

    Merci du partage
    avatar
    Talyssia
    FémininAge : 18Messages : 35

    le Lun 1 Avr 2013 - 12:08

    Merci :hug2:
    avatar
    Kruzoé
    FémininAge : 22Messages : 29

    le Jeu 11 Avr 2013 - 21:27

    merci :)
    avatar
    Anaëlle;
    FémininAge : 24Messages : 3

    le Ven 19 Avr 2013 - 18:38

    Merci. :love:
    avatar
    Invité

    le Lun 22 Avr 2013 - 11:01

    Merci ma Chéwii <3
    avatar
    WizzyFree
    MasculinAge : 24Messages : 1994

    le Lun 29 Avr 2013 - 22:08

    Merci



    avatar
    shala
    FémininAge : 25Messages : 213

    le Mar 30 Avr 2013 - 14:25

    merci



    avatar
    cosv
    MasculinAge : 22Messages : 260

    le Jeu 9 Mai 2013 - 12:25

    merci!
    avatar
    Ravener
    FémininAge : 26Messages : 193

    le Sam 11 Mai 2013 - 22:19

    Un GRAND merci! Ça va être super utile!



    avatar
    Lakxi
    FémininAge : 24Messages : 40

    le Dim 19 Mai 2013 - 11:28

    parfait ! merci: )
    avatar
    cosv
    MasculinAge : 22Messages : 260

    le Sam 25 Mai 2013 - 18:20

    Arigato
    avatar
    kitel
    MasculinAge : 21Messages : 42

    le Dim 26 Mai 2013 - 9:07

    merci ! :)
    avatar
    Braisou
    FémininAge : 19Messages : 19

    le Dim 9 Juin 2013 - 22:05

    Merci
    avatar
    Mylirou
    FémininAge : 20Messages : 7

    le Dim 16 Juin 2013 - 11:37

    merchi
    avatar
    Rapsodie♥
    FémininAge : 25Messages : 63

    le Dim 16 Juin 2013 - 13:32

    :Dmerci



    - Ecrire, c'est ranger le bordel qu'on a dans sa tête. -
    avatar
    Liberto
    FémininAge : 26Messages : 50

    le Mer 19 Juin 2013 - 18:13

    Merci !
    avatar
    titan1
    MasculinAge : 23Messages : 220

    le Sam 22 Juin 2013 - 14:36

    Cool merci.



    Seule la mort met fin au devoir
    avatar
    Kânon
    FémininAge : 29Messages : 30

    le Lun 24 Juin 2013 - 17:02

    Merci =3
    avatar
    Vector.
    FémininAge : 18Messages : 39

    le Jeu 27 Juin 2013 - 18:40

    Merci
    avatar
    Adichou*
    FémininAge : 25Messages : 71

    le Sam 20 Juil 2013 - 22:54

    Merci, ça pourrait toujours me servir Wink
    avatar
    Jabberwock Elyra
    MasculinAge : 23Messages : 44

    le Lun 22 Juil 2013 - 6:26

    je veux bien savoir =)
    avatar
    Sasuke
    MasculinAge : 23Messages : 149

    le Jeu 25 Juil 2013 - 21:32

    Merci ! Wink
    avatar
    Aki'
    FémininAge : 21Messages : 255

    le Dim 28 Juil 2013 - 14:16

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 18 Déc 2017 - 0:35