Cherche menu horizontal déroulant en haut
Résolu
pat
-
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
Je travaille actuellement sur un site, où j'ai besoin d'un menu déroulant horizontal mais qui se déroule vers le haut. Pour l'instant mon menu déroule en bas, et je n'ai pas trouvé de propriété ou de truc pour le faire passer en haut (sachant qu'il est en html et css).
Le javascript me permettrait-il quelque chose (sachant que je n'y connais rien en javascript :s) ?
Avez-vous des pistes à partager ? Je vois que la question a déjà été posée sans succès sur ce forum, je relance donc le débat.
Je travaille actuellement sur un site, où j'ai besoin d'un menu déroulant horizontal mais qui se déroule vers le haut. Pour l'instant mon menu déroule en bas, et je n'ai pas trouvé de propriété ou de truc pour le faire passer en haut (sachant qu'il est en html et css).
Le javascript me permettrait-il quelque chose (sachant que je n'y connais rien en javascript :s) ?
Avez-vous des pistes à partager ? Je vois que la question a déjà été posée sans succès sur ce forum, je relance donc le débat.
A voir également:
- Menu déroulant css horizontal
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Excel
- Canon quick menu - Télécharger - Utilitaires
4 réponses
salut,
avec quelle technique affiches-tu tes sous-menus ?
un {:hover} sans doute mais comment est organisé le menu ?
avec <dl>, <ul> ?
comment est positionné le sous-menu ?
si il est en {position:absolute;} au lieu de le caler avec {top:0;} tu peux le caler avec {bottom:0;}
avec quelle technique affiches-tu tes sous-menus ?
un {:hover} sans doute mais comment est organisé le menu ?
avec <dl>, <ul> ?
comment est positionné le sous-menu ?
si il est en {position:absolute;} au lieu de le caler avec {top:0;} tu peux le caler avec {bottom:0;}
salut,
essaie d'ajouter {bottom:0;}
essaie d'ajouter {bottom:0;}
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
width: 90px;
height: 18px;
display: block;
margin-right: 1px;
float: left;
line-height: 18px;
overflow: hidden;
position: absolute;
z-index:10;
bottom:0;
}
Oo'
que suis-je bête :D
heureusement que tu es là :p
celà fonctionne très bien sous ie, c'est parfait. par contre...
petit souci sous mozilla, ça ne fonctionne pas (rappelons que les 2 sont dissociés).
Mon menu, si je met position:relative et bottom:0 là ou il faut, continue à se dérouler vers le bas, mais en plus le relative fait que le menu se déroule dans la case de mon tableau en décalant ma page vers le bas, il ne passe plus par dessus comme il le faisait avant :s
j'ai donc essayé de virer les <td> pour ff, vu que mes boutons sont en fait des div, et je les ai tous regroupé dans un
autre div que j'ai lui voulu mettre en relative pour pouvoir faire bottom:0, mais ça ne marche pas plus :s
une idée par hasard, de comment je pourrais éviter ça ?
que suis-je bête :D
heureusement que tu es là :p
celà fonctionne très bien sous ie, c'est parfait. par contre...
petit souci sous mozilla, ça ne fonctionne pas (rappelons que les 2 sont dissociés).
Mon menu, si je met position:relative et bottom:0 là ou il faut, continue à se dérouler vers le bas, mais en plus le relative fait que le menu se déroule dans la case de mon tableau en décalant ma page vers le bas, il ne passe plus par dessus comme il le faisait avant :s
j'ai donc essayé de virer les <td> pour ff, vu que mes boutons sont en fait des div, et je les ai tous regroupé dans un
autre div que j'ai lui voulu mettre en relative pour pouvoir faire bottom:0, mais ça ne marche pas plus :s
une idée par hasard, de comment je pourrais éviter ça ?
oui, travailler le HTML plus proprement.
pour un menu tu devrais tout loger dans une <ul>.
si il te faut plus de balises pour la mise en forme tu peux ajouter des <strong> autour des liens.
comme ça ton code est correct sémantiquement et tu devrais pouvoir tout gérer avec un seul style et sans hack.
pour un menu tu devrais tout loger dans une <ul>.
<ul> <li><a href="#">Lien 1</a></li> <li><a href="#">Lien 2</a></li> <li><a href="#">Lien 3</a></li> </ul>
si il te faut plus de balises pour la mise en forme tu peux ajouter des <strong> autour des liens.
comme ça ton code est correct sémantiquement et tu devrais pouvoir tout gérer avec un seul style et sans hack.
ok, suivant ton conseil, j'ai laissé tomber ce code bizarroïde pour refaire un menu plus propre et effectivement ça marche beaucoup mieux !! (on trouve des choses pas toujours top sur le net...)
par contre, dernière chose, j'utilise donc du javascript pour afficher mes sous menus (onmouseover et onmouseout)
mais le problème c'est que quand je passe sur le titre de mon menu, mon sous menu s'affiche mais ne reste pas quand je veux le parcourir : ma souris ne se trouvant plus sur le titre, il disparait.
Y a-t-il un moyen de préciser qu'au survol du sous menu il ne doit pas disparaitre ? il doit falloir que je bouge le onmouseout, je suppose, j'ai essayer de le mettre dans mon sous menu, ça ne marche pas non plus :s
désolée, j'y connais pas grand chose ^^
par contre, dernière chose, j'utilise donc du javascript pour afficher mes sous menus (onmouseover et onmouseout)
mais le problème c'est que quand je passe sur le titre de mon menu, mon sous menu s'affiche mais ne reste pas quand je veux le parcourir : ma souris ne se trouvant plus sur le titre, il disparait.
Y a-t-il un moyen de préciser qu'au survol du sous menu il ne doit pas disparaitre ? il doit falloir que je bouge le onmouseout, je suppose, j'ai essayer de le mettre dans mon sous menu, ça ne marche pas non plus :s
désolée, j'y connais pas grand chose ^^
<table width=100% align="center" border=1>
<tr>
<!-- menu déroulant sous IE -->
<td width=150px height=20px class="menuIE" align="center">
<a class="boutonIE" href="#nogo">Présentation
<table><tr><td>
<a class="SousMenu" href="#nogo">Sous-menu 1</a>
</td></tr></table>
</a></td>
<!-- mes autres boutons de menus .... je vous épargne les lignes récurrentes -->
<!-- menu déroulant sous autres navigateurs -->
<td height=20px>
<div class="boutonFF">Présentation<br />
<a class="SousMenu" href="#nogo">Sous-menu 1</a>
</div>
</td>
<!-- et de même mes autres boutons ... -->
</tr>
</table>
(j"ai pas trouvé le bouton pour la mise en forme, je suppose que c'est parce que je suis pas membre, désolée :s)
Way je sais les tableaux c'est moche mais pour moi qui suis pas douée... ça m'aide ^^
pour la partie css, j'ai ceci :
.menuIE {
display:none !important;
display:block;
}
a.boutonIE, a.boutonIE:link, a.boutonIE:visited, a.boutonIE:active {
width: 90px;
height: 18px;
display: block;
margin-right: 1px;
float: left;
line-height: 18px;
overflow: hidden;
position: absolute;
z-index:10;
}
a.boutonIE:hover {
overflow: visible;
}
a.boutonIE:hover table {
display: block;
border-collapse: collapse;
}
.boutonFF {
width: 90px;
height: 18px;
display: block !important;
display: none;
margin-right: 1px;
float: left;
line-height: 18px;
overflow: hidden;
position: absolute;
z-index:10;
}
.boutonFF:hover {
height: auto;
cursor: pointer;
}
a.SousMenu, a.SousMenu:link, a.SousMenu:visited, a.SousMenu:active {
display: block;
width: 90px !important;
width: 88px;
height: 18px;
}
a.SousMenu:hover {
background: #BCCCD2;
}
j'ai déjà essayé avec un bottom:0, mais ça me place mon menu en bas alors que je souhaite qu'il reste à se place (il n'est pas non plus collé en haut :s)