Menu déroulant explication
kaizen17
Messages postés
87
Statut
Membre
-
kaizen17 Messages postés 87 Statut Membre -
kaizen17 Messages postés 87 Statut Membre -
Bonjour,
voila qui peut m'expliquer ( comme des commentaires ce code en détails s'il vous plait) juste le css
le lien complet du code
voila qui peut m'expliquer ( comme des commentaires ce code en détails s'il vous plait) juste le css
le lien complet du code
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:#00008b;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:50px;
}
xHTML:
<div id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Contacte</a>
<li><a href="#">Membre</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
<li><a href="#">Astuces</a>
<ul>
<li><a href="#">Windows XP</a>
<li><a href="#">Windows Vista</a>
<li><a href="#">Internet Explorer</a>
</ul>
</ul>
</div>
A voir également:
- Menu déroulant explication
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Menu caché tv continental edison ✓ - Forum Téléviseurs
- Canon quick menu - Télécharger - Utilitaires
9 réponses
en réfléchissant je pense avoir besoin de toute l'explication même du xhtml ;-)
ça me sera très utile dans la compréhension, car là je galère j'ai beau chercher même dans mon livre xhtml et css je nage.
merci par avance a celui ou ceux qui voudront bien m'expliquer en détail ce code, c'est une aide précieuse pour avancer.
ça me sera très utile dans la compréhension, car là je galère j'ai beau chercher même dans mon livre xhtml et css je nage.
merci par avance a celui ou ceux qui voudront bien m'expliquer en détail ce code, c'est une aide précieuse pour avancer.
justement j'y suis en plein dedans, j'ai même acheter le livre apprendre le xhtml et css de mathieu nebra, et tout n'est pas expliquer hélas, je passe des dizaines d'heures à essayer de comprendre et de faire des éfforts, c'est pas facile tout seul quant on ne comprend pas.
justement cet exemple concret pourrait me faire comprendre beaucoup de chose
justement cet exemple concret pourrait me faire comprendre beaucoup de chose
xHTML:
<div id="menu"> <!-- il fait une div pour ensuite appliquer le css a cette div -->
<ul> <!-- ouverture d'un liste désordonnée donc sans numéro -->
<li><a href="index.html">Accueil</a></li> <!-- création d'un lien et ansi de suite -->
<li><a href="#">Contacte</a>
<li><a href="#">Membre</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
<li><a href="#">Astuces</a>
<ul>
<li><a href="#">Windows XP</a>
<li><a href="#">Windows Vista</a>
<li><a href="#">Internet Explorer</a>
</ul>
</ul>
</div>
Le css
#menu ul { //correspond a ta div menu et il traite que les balises ul
margin:0; // pas de marge
padding:0; // pas d'espace
list-style-type:none; //il enleve les style de liste, cad les points dans ce cas de figure
text-align:center; // aligne le texte au centre
}
#menu li { // toujours dans ta div menu, il traite ce qu'il y a dans les balises li
float:left; //ce qu'il y a dans ton li sera a gauche
margin:auto; //la marge se fait automatiquement en fonction de l'écran et ta page
padding:0; // pas d'espce, un conseil mets en pour que çà soit plus joli
background-color:#00008b; //défini la couleur d'arrière plan de ton bouton (voir référence code couleur html)
}
#menu li a { //toujours dans ta div menu, concerne maitenant la parti lien donc <a href=' ...
display:block; //il créé un bloc
width:100px; //met une largeur de 100px
color:white; //couleur écriture blanche
text-decoration:none; //sans décoration de texte, évite le soulignement automatique
padding:5px;
}
#menu li a:hover { //dans ta div menu, quand tu vas passer ta souris sur le lien
color:#FFD700; //changement de couleur
}
#menu ul li ul { // me souviens plus :P regarde l'ordre de tes balises dans ton html
display:none;
}
#menu ul li:hover ul { // la meme que pour a:hover plus haut, tu as juste a suivre l'ordre de tes balises
display:block;
}
#menu li:hover ul li { //idem
float:none;
}
#menu li ul { // regarde les définitions css pour position : absolute ;)
position:absolute;
}
#menu {
height:50px; //la hateur de ton ménu déroulant sera de 50 px
}
Voila j'espère que çà peut t'aider
<div id="menu"> <!-- il fait une div pour ensuite appliquer le css a cette div -->
<ul> <!-- ouverture d'un liste désordonnée donc sans numéro -->
<li><a href="index.html">Accueil</a></li> <!-- création d'un lien et ansi de suite -->
<li><a href="#">Contacte</a>
<li><a href="#">Membre</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
<li><a href="#">Astuces</a>
<ul>
<li><a href="#">Windows XP</a>
<li><a href="#">Windows Vista</a>
<li><a href="#">Internet Explorer</a>
</ul>
</ul>
</div>
Le css
#menu ul { //correspond a ta div menu et il traite que les balises ul
margin:0; // pas de marge
padding:0; // pas d'espace
list-style-type:none; //il enleve les style de liste, cad les points dans ce cas de figure
text-align:center; // aligne le texte au centre
}
#menu li { // toujours dans ta div menu, il traite ce qu'il y a dans les balises li
float:left; //ce qu'il y a dans ton li sera a gauche
margin:auto; //la marge se fait automatiquement en fonction de l'écran et ta page
padding:0; // pas d'espce, un conseil mets en pour que çà soit plus joli
background-color:#00008b; //défini la couleur d'arrière plan de ton bouton (voir référence code couleur html)
}
#menu li a { //toujours dans ta div menu, concerne maitenant la parti lien donc <a href=' ...
display:block; //il créé un bloc
width:100px; //met une largeur de 100px
color:white; //couleur écriture blanche
text-decoration:none; //sans décoration de texte, évite le soulignement automatique
padding:5px;
}
#menu li a:hover { //dans ta div menu, quand tu vas passer ta souris sur le lien
color:#FFD700; //changement de couleur
}
#menu ul li ul { // me souviens plus :P regarde l'ordre de tes balises dans ton html
display:none;
}
#menu ul li:hover ul { // la meme que pour a:hover plus haut, tu as juste a suivre l'ordre de tes balises
display:block;
}
#menu li:hover ul li { //idem
float:none;
}
#menu li ul { // regarde les définitions css pour position : absolute ;)
position:absolute;
}
#menu {
height:50px; //la hateur de ton ménu déroulant sera de 50 px
}
Voila j'espère que çà peut t'aider
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
ok merci je suis en train de digérer ( j'en ai pour un moment^^)
cependant
les balise li et lu sont des balises lignes ? c'est pour ça qu'il met display ?
j'ai du mal a comprendre quant est-ce que c'est utile de les mettres ou pas.
merci
cependant
les balise li et lu sont des balises lignes ? c'est pour ça qu'il met display ?
j'ai du mal a comprendre quant est-ce que c'est utile de les mettres ou pas.
merci
Ce css là est relativement simple
<ul> te permet d'ouvrir une liste désordonnée.
Ensuite <li> te permet de rajouter un élément à ta liste.
Tiens va là dessus tout est extrêmement bien commenté. En 30 minutes tu devrai avoir tout compris ;)
http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Il n' y a que du css ici, le mieux est de rajouter du javascript, mais pour l'instant reste au css ;)
<ul> te permet d'ouvrir une liste désordonnée.
Ensuite <li> te permet de rajouter un élément à ta liste.
Tiens va là dessus tout est extrêmement bien commenté. En 30 minutes tu devrai avoir tout compris ;)
http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Il n' y a que du css ici, le mieux est de rajouter du javascript, mais pour l'instant reste au css ;)
merci j'ai la page ouvert depuis hier soir, mais je pensais justement que c'étais compliquer, je vais y regarder un peu plus sérieusement :-)
sinon, tu as skype?
( au cas ou je pourrais de temps en temps te poser quelques questions selon ta disponibilité bien sur ^^)
sinon, tu as skype?
( au cas ou je pourrais de temps en temps te poser quelques questions selon ta disponibilité bien sur ^^)
Euh skype ... Non çà bouffe pas trop de process pour rien !! Jte file mon msn par pm si tu veux à la limite.
Mais lis bien le siteduzero il explique très bien.
Mais lis bien le siteduzero il explique très bien.
oui oui! je m'y met a fond lol, c'est un peu le fouilli dans la tête, mais je me retrousse les manches !
sinon pour msn, ( je n'est pas, trop long a expliquer ^^)
c'est dommage skype est vraiment super pratique s'installe en deux minutes, et puis c'est beaucoup plus simple de communiquer en parlant ;-) , on se comprend plus vite quant il y a un soucis.
sinon merci quand même !
sinon pour msn, ( je n'est pas, trop long a expliquer ^^)
c'est dommage skype est vraiment super pratique s'installe en deux minutes, et puis c'est beaucoup plus simple de communiquer en parlant ;-) , on se comprend plus vite quant il y a un soucis.
sinon merci quand même !
