Sujet Précédent Sujet Suivant

Menu déroulant en CSS ou JavaScript ?

Résolu/Fermé
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 - 18 janv. 2008 à 12:16
 mor ngom en licence1 - 26 oct. 2015 à 11:28
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
Xil Messages postés 350 Date d'inscription vendredi 18 janvier 2008 Statut Membre Dernière intervention 11 juin 2009 257
18 janv. 2008 à 12:42
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
Réponse 2 / 6
shangocubano Messages postés 2 Date d'inscription mardi 17 février 2009 Statut Membre Dernière intervention 17 février 2009 8
17 févr. 2009 à 13:40
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
Olivier C
12 juil. 2010 à 09:38
Yes ! enfin un menu accordéon qui marche ! Adopté ! Merci beaucoup !
0
so-noob !
18 juin 2011 à 00:17
il y a quand même quelques problèmes avec ton code ...
0
mauricel
22 juin 2011 à 18:13
j'avou
0
mor ngom en licence1
26 oct. 2015 à 11:28
fait moi le commentaire
0
Réponse 3 / 6
rgdu86 Messages postés 275 Date d'inscription mercredi 23 mai 2007 Statut Membre Dernière intervention 7 juillet 2014 65
18 janv. 2008 à 13:52
Merci pour tout Xil, je penses que ça va m'aider, je regarderais cela un petit peu plus tard.

Cordialement.

R.G.
3
Réponse 4 / 6
siskozed Messages postés 69 Date d'inscription mercredi 16 janvier 2008 Statut Membre Dernière intervention 2 septembre 2009 86
18 janv. 2008 à 13:21
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.
2

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

Posez votre question
Réponse 5 / 6
bibi
20 août 2009 à 14:40
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
1
Réponse 6 / 6
pashmina Messages postés 688 Date d'inscription mercredi 16 mai 2007 Statut Membre Dernière intervention 5 mai 2010 70
18 janv. 2008 à 12:42
c'est pas possible en css il me semble
-3
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 405
19 juin 2009 à 08:20
bien sur que ci c'est possible un menu sans javascript
http://bormat2.free.fr/wordpress4/
0