Comment faire pour modifier la propriété du CSS

**pierrot10** · 15/04/2012, 18h24

Bonjour à tous,

J'essaye de modifier le CSS sur un <li> mais évidemment je n'y arrive pas.

Voici le html

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
 
<ul class="ddmenu">
<li>1</li>
<li>2
<ul style="display:none">
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>

et voici le code jquery

Code jquery :

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
 
// JavaScript Document
	var timeout    = 9500;
	var closetimer = 0;
	var ddmenuitem = 0;
 
 
	function ddmenu_open(){
			ddmenu_canceltimer();
		   	ddmenu_close();
		   	  ddmenuitem = $(this).find('ul').css('display', 'block');
//			  ddmenuitem = $(this).find('ul').parent().css('background-image', 'none');
//			  ddmenuitem = $(this).find('ul').parent().css('background-color', '#eeeeee');
 
		}
 
	function ddmenu_close(){ 
			if(ddmenuitem){
				ddmenuitem = ddmenuitem.css('display', 'none');
			}
		}
 
	function ddmenu_timer(){
			closetimer = window.setTimeout(ddmenu_close, timeout);
		}
 
		function ddmenu_canceltimer(){  
			if(closetimer){  
				window.clearTimeout(closetimer);
		        closetimer = null;
			}
		}
 
 
		document.onclick = ddmenu_close;
		$(document).ready(function(){
			$('.ddmenu > li').find('ul').css('display', 'none');
			$('.ddmenu > li').bind('mouseover', ddmenu_open);
		    $('.ddmenu > li').bind('mouseout',  ddmenu_timer);
		});

Ceci fonctionne très bien.
Mais, par défault les <li> du premier niveau on une background-image.
Quand je passe la souris sur le li, le sous menu se développe très bien. Mais j'aimerais que l'image de fond soit remplacé par la couleur de fond background-color:#eee; et évidemment quand le timeout est échu, que l'image de fond revienne.

J'ai essayé de faire avec un parent(), comme vous le voyer en commentaire. Mas évidemment ca ne fonctionne pas.

Pourriez-vous m'aider la dessus?

Aussi, j'aimerais que le sous-menu de développe en douce. Il y a une fonction comme toogle? ou slideDown(slow)?
Malheureusement je n'y ai aussi pas réussi, mais je vais encore regarder, mais si vous pouviez me mettre sur la piste ca serait cool.

Merci

**elfamine** · 15/04/2012, 19h05

en CSS normalement ca devrait faire l'affaire...

Code :

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

1
2
3
4
5
6
.ddmenu{
background-image:url('bg.png');}
 
.ddmenu li ul{
background-image:none!important;
background-color:#eee;

edit:j'ai rien dit je crois que tu cherche .stop().animate({"background-image": "img.png"}, "slow");

**pierrot10** · 15/04/2012, 19h13

Heu, ben c'est en jQuery que je veux changer les propriétés du CSS...

Pas directement dans le fichier .css

**elfamine** · 15/04/2012, 20h35

selon la docu ici : http://api.jquery.com/animate/ à moins d'utiliser le plugin jQuery.Color() tu ne pourra pas manipuler background-color
j'ai essayé avec fontSize pour le fun

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
<html>
<head>
<style media="screen" type="text/css">@import url("center.css");</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.submenu').hide();
 	$('.xmenu').hover(
		function(){	$('.submenu',this).slideDown();
					 $('.submenu li',this).animate({fontSize: "3em"}, "slow");
				},
		function(){$('.submenu',this).slideUp();
		$('.submenu li',this).animate({fontSize: "1em"}, "slow")}
	); 
});
</script>
</head>
<body>
 
<ul class="ddmenu">
<li>1</li>
<li class="xmenu">2
<ul class="submenu">
<li>2.1</li>
<li>2.2</li>
</ul>
</li>
</ul>
</body>
</html>

**pierrot10** · 15/04/2012, 20h40

Ben je viens juste de trouver avec

addClass() et removeClass() et ca marche bien. Du moins je l'espère, je suis en train de tester

Reste a voir comment faire le slide.

J'ai trouver

show( 'slide', 'down', 1000 )

Mais ca fonctionne bizarement.....

Comment faire pour modifier la propriété du CSS

jQuery

Discussions similaires

Partager

Partager