Menu déroulant en CSS ou JavaScript ?

Résolu

rgdu86 Messages postés 275 Statut Membre -
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.

Afficher la suite

A voir également:

Menu déroulant js
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Canon quick menu - Télécharger - Utilitaires
Supprimer menu déroulant excel - Forum Excel

6 réponses

Réponse 1 / 6

Xil Messages postés 351 Statut Membre 257

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.

Réponse 2 / 6

shangocubano Messages postés 2 Statut Membre 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>

Olivier C

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

so-noob !

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

mauricel

j'avou

mor ngom en licence1

fait moi le commentaire

Réponse 3 / 6

rgdu86 Messages postés 275 Statut Membre 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

siskozed Messages postés 69 Statut Membre 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.

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

Posez votre question

Réponse 5 / 6

bibi

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

pashmina Messages postés 710 Statut Membre 71

c'est pas possible en css il me semble

math 2000 Messages postés 2833 Statut Membre 405

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

Discussions similaires

Suppression listes déroulantes

Supprimer liste déroulante Excel

Effacer liste déroulante

menu caché

Supprimer Liste déroulante

Votre réponse

Discussions similaires