Header

Partagez | 

[HTML / CSS] Faire un menu avec sous-menus au survol

Message Sujet: [HTML / CSS] Faire un menu avec sous-menus au survol   Lun 9 Mai - 15:13

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Le personnel

Bons Points (BP) : 106
Voir le profil de l'utilisateur
Tutoriel rédigé par Tite-May

Faire un menu avec sous-menus au survol [HTML / CSS]

Hello hello !

Voilà un tutoriel pour apprendre à faire ceci :
ou

C'est parti pour apprendre comment faire !

Exclamation Ce tuto est à faire sur une page HTML. Si vous souhaitez le faire sur forum : retirez tous les retours à la ligne !

~ On crée le menu


Code:
<ul id="menu">
    <li><a href="#">Mon menu 1</a></li>
    <li><a href="#">Mon menu 2</a></li>
    <li><a href="#">Mon menu 3</a></li>
</ul>

Puis dans chaque menu on va aussi mettre une liste pour faire les sous-menus.

Code:
<ul id="menu">
    <li><a href="#">Mon menu 1</a>
        <ul>
            <li><a href="#">Mon sous menu 1</a></li>
            <li><a href="#">Mon sous menu 2</a></li>
        </ul>
    </li>
    <li><a href="#">Mon menu 2</a>
        <ul>
            <li><a href="#">Mon sous menu 1</a></li>
            <li><a href="#">Mon sous menu 2</a></li>
        </ul>
    </li>
    <li><a href="#">Mon menu 3</a>
        <ul>
            <li><a href="#">Mon sous menu 1</a></li>
            <li><a href="#">Mon sous menu 2</a></li>
        </ul>
    </li>
</ul>

Pour le moment, le rendu est pas terrible : pas du tout ce qu'on veut !!
Spoiler:
 

On s'occupe de la mise en page en CSS.


On va commencer par retirer les puces de nos deux listes. Comme ceci :
Code:
ul#menu, ul#menu ul{
list-style-type:none;
}
Arrow On applique le style à la balise ul qui a pour id menu (ul#menu) ainsi qu'à la balise ul qui se trouve à l'intérieur de la précédente (ul#menu ul)

Puis on va retirer tous les remplissages (padding) en les mettant à 0 pour qu'il n'y ait plus les décalages.
Code:
ul#menu, ul#menu ul{
list-style-type:none;
padding:0;
}

Maintenant on va cacher les sous menus : on veut qu'ils n'apparaissent qu'au passage de la souris.
Code:
ul#menu ul{
display:none;
}

Et on dit à notre css : quand on passe sur une des puces, la sous liste concernée doit se montrer.
Code:
ul#menu li:hover > ul{
display:block;
}
Arrow On applique le style à la balise ul qui est enfant direct (>) de la balise li qui est dans ul#menu. Mais on ne l'applique que quand on survole la balise li (li:hover), donc un des points de la liste.

Si vous faites un aperçu, vous vous rendrez compte que du coup ça décale tout vers le bas. Pas de souci ! On va faire s'afficher la sous liste à coté plutôt. Pour cela, on comment par changer les positionnements : d'abord on dit que notre sous liste doit se placer par rapport à notre liste.
Code:
ul#menu li{
position:relative;
}
ul#menu li:hover > ul{
position:absolute;
}

Bon, là ça se grimpe un peu dessus, mais au moins ça ne décale plus. Pour que ça fasse joli, on va appliquer une largeur à notre première liste, et placer notre sous liste après cette largeur. Comme ceci (j'ai mis une couleur de fond, une couleur au passage de la souris et j'ai mis en page comme je voulais en CSS ^^) :
Code:
ul#menu, ul#menu ul{
list-style-type:none;
padding:0;
/*mise en page des listes*/
width:150px;
background:grey;
color:white;
text-align:center;
}
ul#menu a, ul#menu ul a{
color:white;
}
ul#menu ul{
display:none;
}
ul#menu li{
position:relative;
}
ul#menu li:hover{
background:black;
}
ul#menu li:hover > ul{
display:block;
position:absolute;
left:150px; /* on place notre sous liste */
top:0; /*on place notre sous liste*/
}

Et voilà le rendu :

Et pour un menu horizontal ?


Pour cela on va changer légèrement la CSS. On va rajouter que nos "li" de la liste principale doivent être en "display:inline-block"
Code:
ul#menu li{
    position:relative;
 /*mise en page des listes*/
    width:150px;
    background:grey;
    color:white;
    text-align:center;
display:inline-block;
    }
Et on va retirer notre positionnement des sous listes :
Code:
ul#menu li:hover > ul{
    display:block;
    position:absolute;
    }

Et le résultat :



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussigné(e), Tite-May, accepte / n'accepte pas qu'un directeur reposte le tutoriel "Faire un menu avec sous-menus au survol" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[HTML / CSS] Faire un menu avec sous-menus au survol
Page 1 sur 1
 Sujets similaires
-
» probleme pour faire un lien avec mes boutons
» Comment faire un menu cadré?
» Forum supprimé sans que je l'ai supprimé et impossible d'en faire un nouveau avec cette adresse e-mail
» Comment faire ce menu svp
» Créer un forum avec sous-domaine français
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens