Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

menu déroulant à l'aide des css

5 réponses
Avatar
(_,uillaume
Bonjour,
je cherche à réaliser un menu vertical dont les sous-menus seraient
cachés par défaut, et n'apparaîtraient qu'au survol du menu parent, en
décalant le reste du menu vers le bas.

au repos :
menu1
menu2
menu3

au survol de menu2 :
menu1
menu2
menu2.1
menu2.2
menu3

Je n'ai pas trouvé d'exemple d'où m'inspirer...
Et pour l'instant, j'en suis là... mais il reste du boulot :
- les sous-menus s'affichent au survol de n'importe quel menu;
- l'espace des sous-menus caché reste réservé.

quelqu'un aurait déjà vu quelque chose du genre, ou même une solution?
merci!

<html>
<head>
<met http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>test menu</title>
<style type="text/css">
#menu {
position: absolute;
top: 20px;
left: 20;
margin: 0;
padding: 0;
width: 150px;
}

#menu ul {
list-style : none
}

#menu ul ul {
visibility : hidden;
}

#menu ul:hover ul {
visibility : visible;
}

#menu ul ul:hover {
visibility : visible;
}

#menu a {
display : block;
text-decoration: none;
padding : 3px;
width : 150px;
background-color : #BBB;
}

#menu a:hover {
display : block;
text-decoration: none;
padding : 3px;
width : 150px;
background-color : #DDD;
}
</style>
</head>
<body>
<div id="menu">
<ul id="menuliste">
<li id="active"><a href="#" id="current">Menu1</a></li>
<li><a href="#">Menu2</a></li>
Autre chose...
<li><a href="#">Menu3</a></li>
<ul>
<li><a href="#">Menu3.1</a></li>
<li><a href="#">Menu3.2</a></li>
<li><a href="#">Menu3.3</a></li>
</ul>
<li><a href="#">Menu4</a></li>
</body>
</html>

5 réponses

Avatar
(_,uillaume
merci, j'ai poursuivi mes recherches et vu que le javascript était
quasi-incontournable pour que ça fonctionne sous ie.
Par contre, dans tous les exemples que je vois, les sous-menus sont en
mode "block" et s'affichent au-dessus du reste de la page. Alors que
j'aurais préféré qu'ils s'ajoutent au menu en décalant la suite vers le bas.
Avatar
ASM
(_,uillaume a écrit :
merci,



merci de laisser un chtio morceau du post auquel tu réponds,
qu'on sache à quoi tu fais référence.

Par contre, dans tous les exemples que je vois, les sous-menus sont en
mode "block" et s'affichent au-dessus du reste de la page. Alors que
j'aurais préféré qu'ils s'ajoutent au menu en décalant la suite vers le
bas.



alors :

#menu {
position: relative;

Mais, déjà que le mouseover dépliant les sous-menus n'est pas si
pratique d'utilisation, de voir le reste de la page jouer au yoyo est un
peu déstabilisant.

Sinon tu conserves les visibility et supprimes les display.
Et tant pis pour les vides entre menus ?

Ce n'était qu'un exemple à partir de ton code, pour montrer le
LI du menu contenant le UL de ses sous-menus.

--
Stephane Moriaux et son moins vieux Mac déjà dépassé
Avatar
Olivier Miakinen
Le 30/11/2006 09:30, (_,uillaume a écrit :

merci, j'ai poursuivi mes recherches et vu que le javascript était
quasi-incontournable pour que ça fonctionne sous ie.



Oui, mais tu peux t'arranger pour que le code JavaScript ne soit utilisé
que par IE.

Par contre, dans tous les exemples que je vois, les sous-menus sont en
mode "block" et s'affichent au-dessus du reste de la page. Alors que
j'aurais préféré qu'ils s'ajoutent au menu en décalant la suite vers le bas.



Ce genre de chose est très désagréable pour le visiteur. Pire : si
jamais la suite se « cogne » en bas de la page suite au décalage vers
le bas, cela risque de faire remonter tout le reste, avec ou sans
ascenseur, y compris le menu que tu survolais. Ce menu n'étant alors
plus survolé, ça ferme le sous-menu, tout revient en place, ce qui fait
de nouveau survoler le menu, etc. Bref : tu remplaces ton bête menu par
un jeu d'adresse et de rapidité qui risque de ne pas être du goût de
ceux qui voulaient juste visiter ton site...
Avatar
(_,uillaume
Olivier Miakinen a écrit :

Par contre, dans tous les exemples que je vois, les sous-menus sont en
mode "block" et s'affichent au-dessus du reste de la page. Alors que
j'aurais préféré qu'ils s'ajoutent au menu en décalant la suite vers le bas.



Ce genre de chose est très désagréable pour le visiteur. Pire : si


(...)

ASM a écrit :

Mais, déjà que le mouseover dépliant les sous-menus n'est pas si
pratique d'utilisation, de voir le reste de la page jouer au yoyo est un
peu déstabilisant.





OK, merci à tous les deux. Il est vrai que butant sur la technique, je
n'avais pas approfondi l'ergonomie du bidule. Et que si ça n'existe pas,
c'est souvent pour une bonne raison...
Avatar
jacques77
"(_,uillaume" a écrit dans le message de news:
456e0789$0$19659$
Bonjour,
je cherche à réaliser un menu vertical dont les sous-menus seraient cachés par
défaut, et n'apparaîtraient qu'au survol du menu parent, en décalant le reste
du menu vers le bas.



Bonsoir,
Un petit tour sur http://css.alsacreations.com/Construction-de-menus-en-CSS/
devrait te permettre de trouver ton bonheur.