Menu déroulant en CSS ou JavaScript ? [Résolu/Fermé]

Signaler
Messages postés
275
Date d'inscription
mercredi 23 mai 2007
Statut
Membre
Dernière intervention
7 juillet 2014
 -
 mor ngom en licence1 -
Bonjour à tous,

J'aimerais savoir comment faire pour créer un menu qui s'affiche lors du passage de la souris. Je m'explique plus en détaille. J'ai déjà vu sur certain site que quand on passe sa souris sur un lien, il y a un menu qui s'affiche et disparaît quand on enlève la souris, comme sur ce site :
http://www.defense.gouv.fr/

Est-ce que ça doit être en CSS ou JavaScript ?

Donc si quelqu'un a une petite réponse, je suis preneur.

Par avance, merci.

Cordialement.

R.G.
A voir également:

6 réponses

Réponse 1 / 6
Messages postés
350
Date d'inscription
vendredi 18 janvier 2008
Statut
Membre
Dernière intervention
11 juin 2009
 252
L'idéal est en CSS pour sa rapidité d'exécution, tu as un très bon exemple ici :
http://marcarea.com/tuto/menu01.php

La plupart des menu déroulant sont fait en javascript et tu en as de très simples, comme celui-ci
http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu4.htm
(voir le code source)

Mais si le javascript est désactivé sur le navigateur du visiteur, le menu en javascript ne fonctionnera pas.

C'est un choix à faire, le javascript offre plus de possibilités visuelles.
7
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Réponse 2 / 6
Messages postés
2
Date d'inscription
mardi 17 février 2009
Statut
Membre
Dernière intervention
17 février 2009
 8
Voila vous avez ici le menu déroulant en javascript. J'espere que tout passe bien.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Menu déroulant en Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style>
#niveau_1{
width:170px;
background-color:red;
padding-left:20px;
}
#niveau_2{
width:170px;
background-color:red;
padding-left:20px;
}
#niveau_3{
width:170px;
background-color:red;
padding-left:20px;
}

</style>

</head>

<script>
function sous_menu_ouvre(_sous_menu) {
_sous_menu.style.display='block';
}
function sous_menu_ferme(_sous_menu) {
_sous_menu.style.display='none';
}

</script>

<body>

<p><font color="#0000FF" size="5" face="Vivaldi" ><strong>Menus</strong></font></p>
<ul style="list-style-type:square">
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_1_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_1_in'));" id="niveau_1" style="float:left">
menu 1</li>
<ul id="niveau_1_in" style="display:none">
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));" id="niveau_11">
menu 1.1</li>
<ul id="niveau_11_in" style="display:none">
<li> menu 1.1.1</li>
<li> menu 1.1.2</li>
<li> menu 1.1.3</li>
</ul>
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_11_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_11_in'));" id="niveau_12">
menu 1.2</li>
<ul id="niveau_12_in" style="display:none">
<li> menu 1.2.1</li>
<li> menu 1.2.2</li>
<li> menu 1.2.3</li>
</ul>
</ul>
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_2_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_2_in'));" id="niveau_2"style="float:left">
menu 2</li>
<ul id="niveau_2_in" style="display:none">

<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_21_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_21_in'));" id="niveau_21">
menu 2.1</li>
<ul id="niveau_21_in" style="display:none">
<li> menu 2.1.1</li>
<li> menu 2.1.2</li>
<li> menu 2.1.3</li>
</ul>

<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_22_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_22_in'));" id="niveau_22">
menu 2.2</li>
<ul id="niveau_22_in" style="display:none">
<li> menu 2.2.1</li>
<li> menu 2.2.2</li>
<li> menu 2.2.3</li>
</ul>

</ul>
<li onMouseOver="sous_menu_ouvre(document.getElementById('niveau_3_in'));"
onMouseOut="sous_menu_ferme(document.getElementById('niveau_3_in'));" id="niveau_3"style="float:left">
menu 3</li>
<ul id="niveau_3_in" style="display:none">
<li> menu 3.1</li>
<li> menu 3.2</li>
<li> menu 3.3</li>
</ul>


</ul>

</body>
</html>
7
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Signaler

Yes ! enfin un menu accordéon qui marche ! Adopté ! Merci beaucoup !
Signaler

il y a quand même quelques problèmes avec ton code ...
Signaler

fait moi le commentaire
Réponse 3 / 6
Messages postés
275
Date d'inscription
mercredi 23 mai 2007
Statut
Membre
Dernière intervention
7 juillet 2014
 65
Merci pour tout Xil, je penses que ça va m'aider, je regarderais cela un petit peu plus tard.

Cordialement.

R.G.
Réponse 4 / 6
Messages postés
69
Date d'inscription
mercredi 16 janvier 2008
Statut
Membre
Dernière intervention
2 septembre 2009
 86
supers exemples, merci ca va me servir à moi aussi. Je m'y met dès ce soir... Je pensais que c'était plus comlpliqué, mais en fait c'est carrément abordable.
Réponse 5 / 6

salut cela fait maintenant beaucoup de jours que je n'arrive pas à faire un bon menu deroulant en css
j'aimerais bien reçevoir de l'aide merçi
Réponse 6 / 6
Messages postés
688
Date d'inscription
mercredi 16 mai 2007
Statut
Membre
Dernière intervention
5 mai 2010
 70
c'est pas possible en css il me semble
Signaler
Messages postés
2579
Date d'inscription
dimanche 9 septembre 2007
Statut
Membre
Dernière intervention
7 mai 2016
 383
bien sur que ci c'est possible un menu sans javascript
http://bormat2.free.fr/wordpress4/
Posez votre question