Créer un menu avec des Sous Menu
Fermé
yassinee
Messages postés
233
Date d'inscription
dimanche 15 mai 2005
Statut
Membre
Dernière intervention
26 novembre 2011
-
18 juil. 2009 à 21:49
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 - 23 juil. 2009 à 21:28
yassinee Messages postés 233 Date d'inscription dimanche 15 mai 2005 Statut Membre Dernière intervention 26 novembre 2011 - 23 juil. 2009 à 21:28
A voir également:
- Créer un menu avec des Sous Menu
- Créer un compte gmail - Guide
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Créer un compte google - Guide
- Créer un compte instagram - Guide
4 réponses
imw
Messages postés
233
Date d'inscription
vendredi 17 juillet 2009
Statut
Membre
Dernière intervention
8 septembre 2011
42
19 juil. 2009 à 09:37
19 juil. 2009 à 09:37
déjà, y'a un soucis de code html ..;
pour rester correct et coéhérent :
Pour ce qui est de l'affichage c'est faisable en full CSS, saus pour IE qui ne sait pas faire de hover sur le li ...
en gros, l'idée est de déplacer le ul du sous menu pour qu'il s'affiche en dehors de l'écran.
Ensuite, lorsque tu passe sur le li (hover), le sous menu est remis à sa place normale ...
Pour le rendre compatible IE, faut rajouter un bout de javascript ...
pour rester correct et coéhérent :
<ul id='navlist'>
<li>menu1</li>
<li>menu2
<ul class='sousmenu'>
<li>sousmenu1</li>
<li>sousmenu2</li>
<li>sousmenu3</li>
<li>sousmenu4</li>
</ul>
</li>
<li>menu3</li>
</ul>
Pour ce qui est de l'affichage c'est faisable en full CSS, saus pour IE qui ne sait pas faire de hover sur le li ...
en gros, l'idée est de déplacer le ul du sous menu pour qu'il s'affiche en dehors de l'écran.
Ensuite, lorsque tu passe sur le li (hover), le sous menu est remis à sa place normale ...
ul.sousmenu{
position: absolute;
left: -999em;
}
#navlist li:hover ul.sousmenu{
left: auto;
}
Pour le rendre compatible IE, faut rajouter un bout de javascript ...
Rodolphe_
Messages postés
1481
Date d'inscription
samedi 7 mai 2005
Statut
Membre
Dernière intervention
20 décembre 2014
288
19 juil. 2009 à 10:40
19 juil. 2009 à 10:40
Tu es sur de ça? j'ai pus afficher un menu déroulant avec IE.
https://marcarea.com/tuto/menu-deroulant-css/
https://marcarea.com/tuto/menu-deroulant-css/
imw
Messages postés
233
Date d'inscription
vendredi 17 juillet 2009
Statut
Membre
Dernière intervention
8 septembre 2011
42
19 juil. 2009 à 14:33
19 juil. 2009 à 14:33
Il existe pleins de solutions pour faire ce genre de menus ...
Eux ont choisis de faire display block/none à la place du left -999em/auto mais le principe reste le même.
Ils utilisent
#menuDeroulant li:hover > .sousMenu { display: block; }
Ceci fonctionne en effet (j'ai testé) sur IE 7 et + !
Par contre, tu peux oublier sur IE6 et inférieur, du au fait qu'ils ne gère pas le hover sur les LI (seulement sur les A)
Eux ont choisis de faire display block/none à la place du left -999em/auto mais le principe reste le même.
Ils utilisent
#menuDeroulant li:hover > .sousMenu { display: block; }
Ceci fonctionne en effet (j'ai testé) sur IE 7 et + !
Par contre, tu peux oublier sur IE6 et inférieur, du au fait qu'ils ne gère pas le hover sur les LI (seulement sur les A)
Arpheus
Messages postés
40
Date d'inscription
jeudi 4 décembre 2008
Statut
Membre
Dernière intervention
29 mars 2010
9
20 juil. 2009 à 10:36
20 juil. 2009 à 10:36
C'est pour cette raison que chaque <li> contient un <a>.
yassinee
Messages postés
233
Date d'inscription
dimanche 15 mai 2005
Statut
Membre
Dernière intervention
26 novembre 2011
27
23 juil. 2009 à 21:28
23 juil. 2009 à 21:28
salut le souci est au niveau de width: 100px;
#navlist li:hover ul.sousmenu{
left: auto;
/* new AJout******/
display: block;
position: absolute;
left: 60%;
top: 200px;
background: #FFFFFF;
width: 100px;
Au niveau de IE c'est bon le sous menu apparait bien par contre sous firefox le sous menu est décaler
#navlist li:hover ul.sousmenu{
left: auto;
/* new AJout******/
display: block;
position: absolute;
left: 60%;
top: 200px;
background: #FFFFFF;
width: 100px;
Au niveau de IE c'est bon le sous menu apparait bien par contre sous firefox le sous menu est décaler
19 juil. 2009 à 17:10
19 juil. 2009 à 17:37
19 juil. 2009 à 17:54
#navlist li:hover ul.sousmenu{
left: auto;
margin-left=50px;
}
Le souci est que même si je change 50px par par exemple 100px rien ne change es que je l'est mis en mauvaise balise ???
19 juil. 2009 à 19:27
left: auto;
margin-left=50px;
ou essaye ça:
#menu_deroulant li:hover > .sous_menu {
display: block;
position: absolute;
left: 80%;
top: 30px;
}
19 juil. 2009 à 22:37
#navlist li:hover ul.sousmenu{
left: auto;
display: block;
position: absolute;
left: 60%;
top: 200px;
background: #FFFFFF;
width: 100px;
}
ul.sousmenu{
position: absolute;
left: -999em;
}
Le souci est au niveau de firefox les sous menu apparaissent mais il a un blanc qui apparait entre le menu ces sosu menu par contre sous IE c'est bon