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
    Joxtop
    FémininAge : 25Messages : 47

    le Dim 17 Aoû 2014 - 17:26

    Merci pour le partage Very Happy
    avatar
    Tchii
    FémininAge : 31Messages : 221

    le Dim 17 Aoû 2014 - 22:44

    Coucou!
    Merci pour ce petit menu.
    A trés vite.
    Tchii!

    avatar
    Nessaleth
    FémininAge : 25Messages : 52

    le Mar 19 Aoû 2014 - 14:17

    Merci !
    avatar
    Adèle
    FémininAge : 25Messages : 96

    le Mer 20 Aoû 2014 - 9:49

    Merci, j'aimerais bien apprendre à faire ça ^^
    avatar
    Perle
    FémininAge : 20Messages : 30

    le Jeu 28 Aoû 2014 - 18:38

    Merci bien !
    avatar
    Layla4
    FémininAge : 17Messages : 149

    le Sam 6 Sep 2014 - 13:25

    Merci !
    avatar
    Mr Yo
    MasculinAge : 42Messages : 37

    le Dim 7 Sep 2014 - 14:40

    merci tout plein Very Happy
    avatar
    hoterion
    FémininAge : 25Messages : 75

    le Mer 10 Sep 2014 - 17:51

    C'est exactement ce que je cherchais, merci du partage!!



    avatar
    Eros
    MasculinAge : 21Messages : 19

    le Jeu 4 Déc 2014 - 20:10

    Merci
    avatar
    FreeSpirit
    MasculinAge : 21Messages : 152

    le Mar 16 Déc 2014 - 19:50

    merci
    avatar
    Memorian
    FémininAge : 22Messages : 52

    le Lun 29 Déc 2014 - 3:04

    Merci!
    avatar
    louha
    FémininAge : 29Messages : 212

    le Jeu 1 Jan 2015 - 16:05

    oh merci j'adore
    avatar
    Cruelly
    FémininAge : 23Messages : 2522

    le Sam 28 Mar 2015 - 21:29

    Merci :)



    Absente pour le moment. Je reviens bientôt c'est promis :ange:
    avatar
    Pau
    FémininAge : 26Messages : 37

    le Jeu 7 Mai 2015 - 13:58

    mercii
    avatar
    Elektra Kloo
    FémininAge : 28Messages : 151

    le Ven 15 Mai 2015 - 20:29

    merci
    avatar
    lΔω
    FémininAge : 19Messages : 101

    le Lun 18 Mai 2015 - 9:29

    Merci
    avatar
    Neffaly
    MasculinAge : 22Messages : 47

    le Lun 18 Mai 2015 - 22:45

    merci
    avatar
    ~Nodoka~
    FémininAge : 20Messages : 181

    le Mer 27 Mai 2015 - 17:46

    merci
    avatar
    ginl
    FémininAge : 29Messages : 61

    le Jeu 28 Mai 2015 - 11:07

    merci x3
    avatar
    Mini007
    MasculinAge : 23Messages : 21

    le Ven 3 Juil 2015 - 2:08

    Merci;)
    avatar
    ecosystem
    FémininAge : 18Messages : 38

    le Lun 7 Sep 2015 - 17:36

    merci
    En ligne
    avatar
    Kelalin
    FémininAge : 24Messages : 1475

    le Lun 7 Sep 2015 - 17:50

    Merci beaucoup pour le partage ! \(>o<)ノ
    avatar
    Maiie
    FémininAge : 27Messages : 55

    le Mar 8 Sep 2015 - 2:30

    Merci beaucoup **
    avatar
    Solid6Snake
    MasculinAge : 33Messages : 116

    le Mer 30 Sep 2015 - 13:12

    Merci !
    avatar
    Elocha
    FémininAge : 66Messages : 255

    le Jeu 29 Oct 2015 - 17:24

    merci !



    eLoChA.
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Avr 2017 - 22:26