Cherche menu horizontal déroulant en haut [Résolu/Fermé]

Signaler
-
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
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.

4 réponses

Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
892
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;}
en fait j'ai trouvé sur le net une solution qui me permet d'être compatible sous IE comme sous FF, et qui fait ceci :

<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)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
892
salut,

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;
}
>
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016

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 ?
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
892 > pat
oui, travailler le HTML plus proprement.

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.
>
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016

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 ^^
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
892 > pat
pour ton JS faudrait voir le code en action.
as-tu une version en ligne ?

à priori c'est peut être que ton <li> n'englobe pas les <a>.
si les <a> ont {float:left;} ajoute le aussi à <li>.

sinon tu peux le faire en CSS pur.

regarde et .
>
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016

C'est bon ! j'ai trouvé la solution à mon problème, il me fallait seulement placer une deuxième fois le onmouseover, je l'avais testé et ça ne marchait pas, j'avais du faire une erreur de syntaxe ou autre à ce moment là...


merci beaucoup de ton aide en tout cas, et de tes réponses rapides !!
tu m'as bien débloquée, je partais je ne sais ou avec l'autre code :s



merci ;)
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
892
content d'avoir pu t'aider, je coche le "résolu".

bon courage pur la suite et peut être à plus !