Cherche menu horizontal déroulant en haut

Résolu/Fermé

pat - 21 mars 2008 à 10:14
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 25 mars 2008 à 15:58

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.

A voir également:

Menu déroulant css horizontal
Menu déroulant excel - Guide
Menu démarrer windows 11 - Guide
Excel menu déroulant en cascade - Guide
Canon quick menu - Télécharger - Utilitaires
Menu demarrer - Guide

4 réponses

Réponse 1 / 4

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
21 mars 2008 à 10:25

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;}

pat
21 mars 2008 à 11:00

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>

<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>




<td height=20px>
<div class="boutonFF">Présentation<br />
<a class="SousMenu" href="#nogo">Sous-menu 1</a>
</div>
</td>



</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)

Réponse 2 / 4

pat
25 mars 2008 à 11:52

up !

Réponse 3 / 4

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
25 mars 2008 à 12:02

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;
}

pat
25 mars 2008 à 12:05

Comme je disais au dessus, mais ma phrase est coupée...

le bottom:0 place mon menu tout en bas de mon écran alors que je souhaite le garder à sa place !
c'est pour ça que j'ai pas de top:0 égalmenent vu qu'il n'est actuellement pas en haut non plus...

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > pat
25 mars 2008 à 12:18

ça c'est parce qu'il faut définir la boite de référence pour le placement.

ajoutes {position:relative;} à l'élément qui devra servir de référence.

pat > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
25 mars 2008 à 12:47

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 ?

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > pat
25 mars 2008 à 12:54

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.

pat > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
25 mars 2008 à 15:21

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 ^^

Réponse 4 / 4

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
25 mars 2008 à 15:58

content d'avoir pu t'aider, je coche le "résolu".

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

Discussions similaires

Suppression listes déroulantes

trait horizontal avec du css

les entrées et les sortées

Supprimer liste déroulante Excel

[CSS] Forcé retour à la ligne

Discussions similaires

Newsletters