Div qui s'affiche au passage de la souris

Résolu/Fermé
MIE07 Messages postés 134 Date d'inscription mercredi 11 avril 2012 Statut Membre Dernière intervention 28 juillet 2015 - Modifié par MIE07 le 24/12/2013 à 00:25
MIE07 Messages postés 134 Date d'inscription mercredi 11 avril 2012 Statut Membre Dernière intervention 28 juillet 2015 - 24 déc. 2013 à 18:37
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 !

A voir également:

8 réponses

stefman78260 Messages postés 48 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 24 décembre 2013 2
Modifié par stefman78260 le 24/12/2013 à 02:27
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
0
MIE07 Messages postés 134 Date d'inscription mercredi 11 avril 2012 Statut Membre Dernière intervention 28 juillet 2015 18
24 déc. 2013 à 14:21
Merci, je vais essayer sans plus tarder.
0
MIE07 Messages postés 134 Date d'inscription mercredi 11 avril 2012 Statut Membre Dernière intervention 28 juillet 2015 18
24 déc. 2013 à 15:20
Ç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 ?
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
24 déc. 2013 à 15:43
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
MIE07 Messages postés 134 Date d'inscription mercredi 11 avril 2012 Statut Membre Dernière intervention 28 juillet 2015 18
24 déc. 2013 à 16:16
Merci animostab, ça fonctionne à merveille, mais je voudrais que le sous-menu soit horizontal, comment faire ?
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 24/12/2013 à 16:28
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
0
stefman78260 Messages postés 48 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 24 décembre 2013 2
24 déc. 2013 à 17:51
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 !
0
MIE07 Messages postés 134 Date d'inscription mercredi 11 avril 2012 Statut Membre Dernière intervention 28 juillet 2015 18
24 déc. 2013 à 18:37
Merci à tous, ça fonctionne très bien ;-)

Je vais le mettre en résolu.

Et encore merci !
0