Discussion :

[Alplob]

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]

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]

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

[Alplob]

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]

Code :

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

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

[Alplob]

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