Comment faire un menu en JS ?

Un grand mystère ...

Sujet résolu

Anonyme

16 août 2006 à 18:01:12

Bonjour,

J'ai fais une recherche avec le nouveau (et très pratique) système de recherche et il ma retourner 0 résultats (intérécent), alors je viens poster sur le fofo :

Comment faire un menu qui apparait quand on approche le curseur d'une image ?

Vous pouvez me donner le script de base et m'expliquer rapidement ce que je dois changer (car je suis (malheureusement) un Zér0 en JS), ensuite j'adapterais avec ce que je veux faire

Merci

Sitevolution

16 août 2006 à 18:22:37

qui t'as dis que tu devais utiliser du Javascript ?

regardes mon site, mon menu est fait totalement en CSS et c'est ce que tu veux je crois, non ?

si tu veux je te passerai mon code, mais tu peux chercher sur google tu trouveras peut-être, parce que le code que j'ai, je l'ai fait moi-même, donc il n'est pas forcément optimisé au mieux, donc va voir sur mon site et ensuite fais une recherche sur google !

Anonyme

16 août 2006 à 18:36:26

Décidément M. CSS m'épatera toujours

Mais c'est dans quelle fichier CSS que tu as mis le code ? titre.css je suppose

Sitevolution

16 août 2006 à 18:38:52

non, texte.css, mais tiens, je te donne le bout qui te seras utile :

#barre,#barre ul
{
padding : 0px;
}

#barre ul
{
position : absolute;
display : none;
padding-bottom : 5px;
margin : 0px;
margin-left : -27px;
text-align : center;
width : 200px;
overflow : auto;
max-width : 200px;
color : #4a4a4a;
background-color : #cdffd9;
background-image : url("http://fandegreenday.free.fr/images/fondMenu.jpg");
background-repeat : repeat-y;
background-position : center;
border : 2px dashed #005800;
}

#barre .titre_cate:hover
{
background-image : none;
background-color : #006e00;
}

#barre li
{
float : left;
text-align : left;
list-style-type : none;
}

#barre li ul li:hover
{
color : #00c100;
}

#barre li .depasse_bord
{
width : 200px;
margin-left : -50px;
}

#barre li .depasse_bord2
{
width : 130px;
margin-left : -70px;
}

#barre li ul li
{
list-style-type : square;
padding-left : 4px;
}

#barre li li
{
float : none;
}

#barre span
{
display : block;
text-align : center;
}

#barre li ul li:hover
{
background-color : #006e00;
}

#barre li:hover ul li ul
{
display : none;
}

#barre li:hover ul,#barre li ul li:hover ul
{
display : block;
}

#barre li ul li:hover ul
{
margin-left : 70px;
}

évidemment tu peux changer les couleurs pour qu'elles conviennent à ton site !

Anonyme

16 août 2006 à 18:52:52

Oula c'est beaucoup trop compliqué :-°

je pense que je vais prendre en JS car là

Sitevolution

16 août 2006 à 18:54:33

je sais pas si en JS c'est moins compliqué... en plus il faut que le visiteur accepte le JS sur son naviguateur pour être sûr que ton menu fonctionne correctement !

Anonyme

16 août 2006 à 19:08:58

Bon j'ai mis ca dans le XHTML :

<div id="menu">
<li><span class="titre_menu">Fichier</span>
<ul>
<li><a href="BIOS.php?methode=nouveau&objet=bloc-note">Nouveau</a></li>
<li><a href="BIOS.php?methode=ouvrir&objet=0">Ouvrir</a></li>
<li><a href="BIOS.php?methode=enregistrer&objet=XXX">Enregistrer</a></li>
</ul></li>
</div>

Avec le CSS

#menu,#menu ul
{
padding : 0px;
}

#menu ul
{
position : absolute;
display : none;
padding-bottom : 5px;
margin : 0px;
margin-left : -27px;
text-align : center;
width : 200px;
overflow : auto;
max-width : 200px;
color : #4a4a4a;
background-color : #cdffd9;
background-image : url("http://fandegreenday.free.fr/images/fondMenu.jpg");
background-repeat : repeat-y;
background-position : center;
border : 2px dashed #005800;
}

#menu .titre_menu:hover
{
background-image : none;
background-color : #006e00;
}

#menu li
{
float : left;
text-align : left;
list-style-type : none;
}

#menu li ul li:hover
{
color : #00c100;
}

#menu li .depasse_bord
{
width : 200px;
margin-left : -50px;
}

#menu li .depasse_bord2
{
width : 130px;
margin-left : -70px;
}

#menu li ul li
{
list-style-type : square;
padding-left : 4px;
}

#menu li li
{
float : none;
}

#menu span
{
display : block;
text-align : center;
}

#menu li ul li:hover
{
background-color : #006e00;
}

#menu li:hover ul li ul
{
display : none;
}

#menu li:hover ul,#menu li ul li:hover ul
{
display : block;
}

#menu li ul li:hover ul
{
margin-left : 70px;
}

Mais ca marche pas, le "Fichier" n'apparaît pas

Sitevolution

16 août 2006 à 19:55:28

tu as du te tromper en implantant le code CSS dans ta page, car j'ai testé en copiant dans une page ce code, et ça fonctionne ! o_O

Anonyme

17 août 2006 à 0:37:41

Ok c'est bon ca marche

Merci

Sitevolution

17 août 2006 à 11:07:42

n'oublies pas de mettre le sujet en résolu !

Anonyme

17 août 2006 à 20:46:43

Niquel

Marche super ton code!
Suffit juste de changer le style mnt^^

Merci...