Div qui s'affiche au passage de la souris [Résolu/Fermé]

Signaler
Messages postés
133
Date d'inscription
mercredi 11 avril 2012
Statut
Membre
Dernière intervention
28 juillet 2015
-
Messages postés
133
Date d'inscription
mercredi 11 avril 2012
Statut
Membre
Dernière intervention
28 juillet 2015
-
Bonjour,

je cherche une façon pour afficher une seconde barre de navigation lors du passage de la souris sur la première barre de navigation.

Comme du site CCM : Quand tu passes ta souris sur Télécharger, par exemple, une barre s'affiche en dessous : Poser une question, Logiciels Windows, ...

Merci d'avance !

8 réponses

Messages postés
48
Date d'inscription
mercredi 15 juin 2011
Statut
Membre
Dernière intervention
24 décembre 2013
2
Bonjour,

Il te faut faire ça avec le CSS ou javascript

Par exemple en JS:

Ton bouton :
<a href="#" onmouseover="document.getElementById('menu1').style.display='block'" onmouseout="document.getElementById('menu1').style.display='none'">MENU</a>

Et ton div en dessous :

<div id="menu1" style="display:none;" onmouseover="document.getElementById('menu1').style.display='block'" onmouseout="document.getElementById('menu1').style.display='none'"><a href="#">Sous menu1</a><a href="#">Sous menu2</a><a href="#">Sous menu3</a></div>

Explications :

onmouseover="document.getElementById('menu1').style.display='block'"
Au survol de la souris, l'élément qui a pour id "menu1" est visible.

onmouseout="document.getElementById('menu1').style.display='none'"
A la sortie du survol de la souris, l'élément qui a pour id "menu1" est visible.

Mais ce n'est pas la meilleur méthode, j'en suis sûr que d'autres t'en donnerons de meilleurs ;-)

Désolé, ma réponse est un peu à l'arrache, mais j'allais aller me couché :-P
Messages postés
133
Date d'inscription
mercredi 11 avril 2012
Statut
Membre
Dernière intervention
28 juillet 2015
17
Merci, je vais essayer sans plus tarder.
Messages postés
133
Date d'inscription
mercredi 11 avril 2012
Statut
Membre
Dernière intervention
28 juillet 2015
17
Ça fonctionne, mais est-ce que je peux définir un certain temps avant que la deuxième div disparaisse, car je n'ai pas le temps de descendre la souris avant qu'elle disparaisse ?
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
586
En fait ce que tu veux c'est un menu déroulant

c'est possible sans javascript
en voici un

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
Messages postés
133
Date d'inscription
mercredi 11 avril 2012
Statut
Membre
Dernière intervention
28 juillet 2015
17
Merci animostab, ça fonctionne à merveille, mais je voudrais que le sous-menu soit horizontal, comment faire ?
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
586
la ou il y a
#menu li:hover ul li {
float:none;
}


tu mets float: left; ou meme rien du tout tu efface tout le code css en gras
Messages postés
48
Date d'inscription
mercredi 15 juin 2011
Statut
Membre
Dernière intervention
24 décembre 2013
2
Oui, tu as aussi la méthode CSS ! Hier je n'avais pas le temps de te détailler tout, mais le lien de animostab m'a l'air très bien !
Messages postés
133
Date d'inscription
mercredi 11 avril 2012
Statut
Membre
Dernière intervention
28 juillet 2015
17
Merci à tous, ça fonctionne très bien ;-)

Je vais le mettre en résolu.

Et encore merci !