Améliorer un menu fait avec JQuery avec du javascript

**Alplob** · 09/04/2009, 22h18

Bonjour à tous,

je réalise un site web avec lequel je souhaite avoir un menu glissant. J'ai donc suivi avec succès ce tutoriel : http://dmouronval.developpez.com/tut...ry/menu-anime/ (je remercie d'ailleurs l'auteur au passage!)

Je l'ai adapté à mes besoins (pas d'images et menus alignés)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="menu">
   <ul>
	      <li class="aa"><a href="#l">Menu 1</a>
		   <ul class="aa">
			<li><a href="#">SMenu 1.1</a></li>
			<li><a href="#">SMenu 1.2</a></li>
		   </ul>
	       </li>
 
		<li class="bb"><a href="#">Menu 2</a>
		     <ul class="bb">
			 <li><a href="#">SMenu 2.1</a></li>
			 <li><a href="#">SMenu 2.2</a></li>
         	      </ul>
                </li>
          </ul>
</div>

Avec le code javascript suivant pour utiliser JQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function () {
	$('#menu li.aa').mouseover(function () {
                $('#menu li ul.aa').slideDown('medium');
		 $('#menu li ul.bb').slideUp('medium');
 
    });
 
	$('#menu li.bb').mouseover(function () {
                $('#menu li ul.bb').slideDown('medium');
		 $('#menu li ul.aa').slideUp('medium');
 
    });

Avec un peu de CSS, je rajoute quelques effets (changer la couleur et le fond du menu et de la case survolés grâce à ':hover'). Ça marche terriblement bien.

A l'exception que les menus ne remontent pas si je mets mon curseur sur le reste de la page. Ma question est donc :
- comment faire pour que mes menus remontent lorsque j'ai fini des survoler ?

Question subsidiaire : j'utilise actuellement la solution palliative

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('body').click(function () {
                $('#menu li ul.bb').slideUp('medium');
		 $('#menu li ul.aa').slideUp('medium');
    });

Mais dans ce cas le surlignage du menu et du sous-menu déployés disparait lorsque je ne les survole plus. J'ai tenté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if('#menu li ul.bb.display'==visible) ('#menu li.bb.background'='999')

... mais cela ne fonctionne pas..
Comment faire pour le surlignage perdure lorsq'un sous-menu est apparent et que je ne le survole pas ?

Merci beaucoup de m'avoir lu et merci d'avance pour vos indications!

Alplob

**SpaceFrog** · 10/04/2009, 08h23

a prt le fait que tu aies oublié le selectuer $ de jQUery pour pointer sur l'élément et que la syntaxe if en js est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if(condition){action}

Tu es sur la bonne voie...
Essaye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($('#menu li ul.bb.display')==visible){$('#menu li.bb.background')='999'}

**Alplob** · 12/04/2009, 17h47

Merci beaucoup, j'essaie ça dès que je peux!

**Alplob** · 13/04/2009, 16h56

J'ai essayé avec ça (avec 2 = dans la deuxième partie, sinon la console javascript de Firefox n'aime pas...) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($('#menu li ul.bb.display')==visible) {$('#menu li.bb.background'=='999');}

Mais aucun effet, et la console javascript de Firefox me répond :
visible is not defined

Avez-vous une idée pour résoudre ce problème ?

**Bovino** · 13/04/2009, 17h42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#menu li ul.bb')[0].css('display')

**Alplob** · 14/04/2009, 17h52

Merci pour la réponse mais cela ne marche toujours pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($('#menu li ul.bb')[0].css('display')==visible){$('#menu li.bb.background')='999';}

La console Java de Firefox me renvoie : $('#menu li ul.bb')[0].css is not a function

Pour info, j'ai essayé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($('#menu li ul.bb')[1].css('display')==visible){$('#menu li.bb.background')='999';}

-> $('#menu li ul.bb')[1] is undefined

**Bovino** · 14/04/2009, 19h37

Oui, ce serait plutôt

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($('#menu li ul.bb').css('display')=='visible')

**Alplob** · 14/04/2009, 21h26

Merci beaucoup, ça progresse

je n'ai plus de message d'erreur dans la console d'erreurs de Firefox!

Maintenant si j'écris ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($('#menu li ul.aa').css('display')!='none'){alert('Hello');}

Je n'obtiens pas de message 'Hello'. JQuery utiliserait autre chose que display pour afficher les Slide ?

**danielhagnoul** · 15/04/2009, 00h20

Bonsoir.

Voici un exemple qui pourrait vous convenir :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <meta name="Description" content="Expace de travail du webmestre." />
    <meta name="Keywords" content="jquery, javascript, json, html, css, exercices, plugin, documentation" />
    <meta http-equiv="Robots" content="none, noindex, nofollow" />
    <meta name="Robots" content="none, noindex, nofollow" />
    <title>Efface moi !</title>
    <style type="text/css">
        body {
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding-left:6px;
            padding-top:6px;
            padding-bottom:6px;
            padding-right:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            margin:12px auto;
            width:800px;
            background-color:#FFFFFF;
            padding:6px;
            border-width:thin;
            border-style:solid;
            border-color:#999999;
        }
        div#menu {
            float:right;
            width:200px;
            border:1px solid red;
        }
        li#menu_1 {
            display:block;
            background-color:#FFFFCC;
         }
        li#menu_2 {
            display:block;
            background-color:#CCFFCC;
         }
        ul#s_menu_1, ul#s_menu_2 { display:none; }
    </style>
    <script type="text/javascript" src="../scripts/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#menu_1').hover(
                function() {
                    $("#s_menu_1").slideDown();
                },
                function() {
                    $("#s_menu_1").slideUp();
                }
            );
 
            $('#menu_2').hover(
                function() {
                    $("#s_menu_2").slideDown();
                },
                function() {
                    $("#s_menu_2").slideUp();
                }
            );
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <div id="menu">
            <ul>
                <li id="menu_1">
                    <a href="#">Menu 1</a>
                    <ul id="s_menu_1">
                        <li><a href="#">Menu 1.1</a></li>
                        <li><a href="#">Menu 1.2</a></li>
                    </ul>
                </li>
                <li id="menu_2">
                    <a href="#">Menu 2</a>
                    <ul id="s_menu_2">
                        <li><a href="#">Menu 2.1</a></li>
                        <li><a href="#">Menu 2.2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

**Alplob** · 15/04/2009, 18h59

Génial ça fonctionne

!! Merci à tous pour vos contributions!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$('#menu li.aa').hover(
                function() {
                    $('#menu li ul.aa').slideDown();
                },
                function() {
                    $('#menu li ul.aa').slideUp();
                }
            );

Améliorer un menu fait avec JQuery avec du javascript

JavaScript

Discussions similaires

Partager

Partager