High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Menu déroulant en CSS ou JavaScript ?

Dernière réponse le 20 aoû 2009 à 14:40:58 rgdu86, le 18 jan 2008 à 12:16:26 
 Signaler ce message aux modérateurs

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. Tout vient à point à qui sait attendre

Configuration: Windows XP
Firefox 2.0.0.11

Posez votre question Répondre

1

pashmina, le 18 jan 2008 à 12:42:05

C'est pas possible en css il me semble
Qui vole un boeuf est vachement costaud

   
Répondre à pashmina

6

math 2000, le 19 jun 2009 à 08:20:59
  • +2

Bien sur que ci c'est possible un menu sans javascript
http://bormat2.free.fr/

   
Répondre à math 2000

2

Xil, le 18 jan 2008 à 12:42:56

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/cssme­nu4.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.

   
Répondre à Xil

3

siskozed, le 18 jan 2008 à 13:21:22

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épondre à siskozed

4

rgdu86, le 18 jan 2008 à 13:52:24

Merci pour tout Xil, je penses que ça va m'aider, je regarderais cela un petit peu plus tard.

Cordialement.

R.G. Tout vient à point à qui sait attendre

   
Répondre à rgdu86

5

shangocubano, le 17 fév 2009 à 13:40:42
  • +1

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>

   
Répondre à shangocubano

7

 bibi, le 20 aoû 2009 à 14:40:58

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épondre à bibi
Posez votre question Répondre
Ils ont besoin de votre aide