Comment appliquer un CSS en fonction de événement $(window).resize

**informer** · 23/11/2016, 16h27

Bonjour à tous,

Mon post pose 3 questions pour le prix d'une:

La différence entre window.addEventListener('resize', MaFonction) et $(window).resize ;
Existe-il un événement resize sur un Menu responsive et si oui comment le capturer car actuellement je teste en fonction du redimensionnement de la page ?
Comment appliquer du CSS actuellement valable pour @media all and (max-width:368px) mais en fonction de la taille du Menu responsive?

Mon objectif est de transformer un Menu Responsive en icône en fonction de la taille de ce même Menu responsive. Actuellement, ça fonctionne par rapport à la définition de l'écran avec le code suivant:

Code CSS :

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
 
/*-------------------------------------------------------------------------------------------------------------------------------------------
Extrait du code du fichier index.css dans le répertoire css
....
-------------------------------------------------------------------------------------------------------------------------------------------*/
 
@media all and (max-width:368px) 
{
#wb_ResponsiveMenu1 {   margin: 0;}
#wb_ResponsiveMenu1 ul li a, #wb_ResponsiveMenu1 .toggle {   font-size: 16px;   font-weight: normal;   font-style: normal;   padding: 15px 20px 15px 20px;}
#wb_ResponsiveMenu1 .toggle + a {   display: none !important;}
.ResponsiveMenu1 {   display: none;   z-index: 9999;}
#ResponsiveMenu1 {   background-color: transparent;}
#wb_ResponsiveMenu1 > ul > li > a {   height: auto;}
#wb_ResponsiveMenu1 .toggle {   display: block;   background-color: #FF6347;   color: #FFFFFF;   padding: 0px 20px 0px 20px;   line-height: 54px;   text-decoration: none;   border: none;}
#wb_ResponsiveMenu1 .toggle:hover {   background-color: #CCCCCC;   color: #0000CD;}
[id^=ResponsiveMenu1-submenu]:checked + ul {   display: block !important;}
#ResponsiveMenu1-title{   height: 71px;   line-height: 71px !important;   text-align: center;}
#wb_ResponsiveMenu1 ul li {   display: block;   width: 100%;}
#wb_ResponsiveMenu1 ul ul .toggle,
#wb_ResponsiveMenu1 ul ul a {   padding: 0 40px;}
#wb_ResponsiveMenu1 a:hover,
#wb_ResponsiveMenu1 ul ul ul a {   background-color: #FF6347;   color: #FFFFFF;}
#wb_ResponsiveMenu1 ul li ul li .toggle,
#wb_ResponsiveMenu1 ul ul a {   background-color: #FF6347;   color: #FFFFFF;}
#wb_ResponsiveMenu1 ul ul ul a {   padding: 15px 20px 15px 60px;}
#wb_ResponsiveMenu1 ul li a {   text-align: left;}
#wb_ResponsiveMenu1 ul li a br {   display: none;}
#wb_ResponsiveMenu1 ul li i {   margin-right: 8px;}
#wb_ResponsiveMenu1 ul ul {   float: none;   position: static;}
#wb_ResponsiveMenu1 ul ul li:hover > ul,
#wb_ResponsiveMenu1 ul li:hover > ul {   display: none;}
#wb_ResponsiveMenu1 ul ul li {   display: block;   width: 100%;}
#wb_ResponsiveMenu1 ul ul ul li {   position: static;}
#ResponsiveMenu1-icon {   display: block;   position: absolute;   left: 30px;   top: 23px;}
#ResponsiveMenu1-icon span {   display: block;   margin-top: 4px;   height: 2px;   background-color: #FFFFFF;   color: #FFFFFF;   width: 24px;}
#wb_ResponsiveMenu1 ul li ul li .toggle:hover{   background-color: #CCCCCC;   color: #0000CD;}
#wb_ResponsiveMenu1 .toggle .arrow-down {   border-top-color: #FFFFFF;}
#wb_ResponsiveMenu1 .toggle:hover .arrow-down, #wb_ResponsiveMenu1 li .active .arrow-down{    border-top-color: #0000CD;}
#wb_ResponsiveMenu1 ul li ul li .toggle .arrow-down {   border-top-color: #FFFFFF;}
#wb_ResponsiveMenu1 ul li ul li .toggle:hover .arrow-down, #wb_ResponsiveMenu1 ul li ul li .active .arrow-down{   border-top-color: #0000CD;}
}

J'ai donc recopié ce code dans un fichier indexResponsiveMenu.css en supprimant @media all and (max-width:368px) {...} et sauvegardé sous le répertoire css.

Puis j'ai le code Javascript suivant :

Code JS :

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
 
$(document).ready(function()
{	var ResponsiveMenuwidthMin = 330;
 
	$(window).resize(function() {
		//alert(document.getElementById('ResponsiveMenu1').offsetWidth);
		if (document.getElementById('ResponsiveMenu1').offsetWidth - ResponsiveMenuwidthMin )< 0
		{		
			$(function(){
				$("head").append(
					$(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"css/indexResponsiveMenu.css"})
				);
			});
		}
	});
});

Mais résultat des courses, c'est qu'il n'y a pas l'effet escompté.

Aussi merci de tout aide pour résoudre ce problème!

Bonjour chez vous

**NoSmoking** · 26/11/2016, 09h25

Bonjour,

Mon post pose 3 questions pour le prix d'une:

Une discussion = une question
Poser plusieurs questions dans un seul et même fil nuit grandement à la qualité du forum : notamment, lors d'une recherche, tout le contenu du fil n'est pas indiqué dans le titre, elle devient donc plus ardue.

Invité · 26/11/2016, 15h01

Bonjour,

tes questions concernenr surtout jQuery.

Cependant :
1/ au lieu d'un nouveau fichier CSS, tu peux, via jQuery, ajouter/supprimer une classe CSS

addClass / removeClass

2/ recopier le bout de CSS, avec la classe.

Code :

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

#wb_ResponsiveMenu1.la_classe {...}

**informer** · 26/11/2016, 16h34

Bonjour jreaux62,

Merci pour ta réponse même si je suis resté sur l'utilisation de @media mais ta solution m'ouvre d'autres perspectives!

Ma solution:

Code CSS :

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
@media all and (max-width:930px) 
{
#wb_ResponsiveMenu1 
{
   margin: 0;
}
#wb_ResponsiveMenu1 ul li a, #wb_ResponsiveMenu1 .toggle
{
   font-size: 16px;
   font-weight: normal;
   font-style: normal;
   padding: 15px 20px 15px 20px;
}
#wb_ResponsiveMenu1 .toggle + a
{
   display: none !important;
}
.ResponsiveMenu1 
{
   display: none;
   z-index: 9999;
}
#ResponsiveMenu1 
{
   background-color: transparent;
}
#wb_ResponsiveMenu1 > ul > li > a 
{
   height: auto;
}
#wb_ResponsiveMenu1 .toggle 
{
   display: block;
   background-color: #FF6347;
   color: #FFFFFF;
   padding: 0px 20px 0px 20px;
   line-height: 54px;
   text-decoration: none;
   border: none;
}
#wb_ResponsiveMenu1 .toggle:hover 
{
   background-color: #CCCCCC;
   color: #0000CD;
}
[id^=ResponsiveMenu1-submenu]:checked + ul 
{
   display: block !important;
}
#ResponsiveMenu1-title
{
   height: 51px;
   line-height: 51px !important;
   text-align: center;
}
#wb_ResponsiveMenu1 ul li 
{
   display: block;
   width: 100%;
}
#wb_ResponsiveMenu1 ul ul .toggle,
#wb_ResponsiveMenu1 ul ul a 
{
   padding: 0 40px;
}
#wb_ResponsiveMenu1 a:hover,
#wb_ResponsiveMenu1 ul ul ul a 
{
   background-color: #FF6347;
   color: #FFFFFF;
}
#wb_ResponsiveMenu1 ul li ul li .toggle,
#wb_ResponsiveMenu1 ul ul a 
{
   background-color: #FF6347;
   color: #FFFFFF;
}
#wb_ResponsiveMenu1 ul ul ul a 
{
   padding: 15px 20px 15px 60px;
}
#wb_ResponsiveMenu1 ul li a 
{
   text-align: left;
}
#wb_ResponsiveMenu1 ul li a br 
{
   display: none;
}
#wb_ResponsiveMenu1 ul li i 
{
   margin-right: 8px;
}
#wb_ResponsiveMenu1 ul ul 
{
   float: none;
   position: static;
}
#wb_ResponsiveMenu1 ul ul li:hover > ul,
#wb_ResponsiveMenu1 ul li:hover > ul 
{
   display: none;
}
#wb_ResponsiveMenu1 ul ul li 
{
   display: block;
   width: 100%;
}
#wb_ResponsiveMenu1 ul ul ul li 
{
   position: static;
}
#ResponsiveMenu1-icon 
{
   display: block;
   position: absolute;
   left: 10px;
   top: 13px;
}
#ResponsiveMenu1-icon span 
{
   display: block;
   margin-top: 4px;
   height: 2px;
   background-color: #FFFFFF;
   color: #FFFFFF;
   width: 24px;
}
#wb_ResponsiveMenu1 ul li ul li .toggle:hover
{
   background-color: #CCCCCC;
   color: #0000CD;
}
#wb_ResponsiveMenu1 .toggle .arrow-down 
{
   border-top-color: #FFFFFF;
}
#wb_ResponsiveMenu1 .toggle:hover .arrow-down, #wb_ResponsiveMenu1 li .active .arrow-down
{ 
   border-top-color: #0000CD;
}
#wb_ResponsiveMenu1 ul li ul li .toggle .arrow-down 
{
   border-top-color: #FFFFFF;
}
#wb_ResponsiveMenu1 ul li ul li .toggle:hover .arrow-down, #wb_ResponsiveMenu1 ul li ul li .active .arrow-down
{ 
   border-top-color: #0000CD;
}

**NoSmoking** · 26/11/2016, 16h46

Sachant qu'une ID devant être UNIQUE cette déclaration

Code :

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

1
2
3
4
[id^=ResponsiveMenu1-submenu]:checked + ul 
{
   display: block !important;
}

pourrait (devrait) s’écrire comme suit

Code :

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

1
2
3
4
#ResponsiveMenu1-submenu:checked + ul 
{
   display: block !important;
}

Invité · 26/11/2016, 17h05

Avec "ma" solution* :

Code jQuery :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function()
{	var ResponsiveMenuwidthMin = 330;
 
	$(window).resize(function() {
		if ( $('#ResponsiveMenu1').width() < ResponsiveMenuwidthMin )
		{		
			$('#ResponsiveMenu1').addClass('minimenu');
		} else {
			$('#ResponsiveMenu1').removeClass('minimenu');
		}
	});
});

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
/* minimenu */
#wb_ResponsiveMenu1.minimenu {   margin: 0;}
#wb_ResponsiveMenu1.minimenu ul li a, #wb_ResponsiveMenu1.minimenu .toggle {   font-size: 16px;   font-weight: normal;   font-style: normal;   padding: 15px 20px 15px 20px;}
#wb_ResponsiveMenu1.minimenu .toggle + a {   display: none !important;}
.ResponsiveMenu1.minimenu {   display: none;   z-index: 9999;}
.....................
 
@media all and (max-width:368px) 
{
#wb_ResponsiveMenu1 {   margin: 0;}
...........

* en réalité une solution très classique, souvent utilisée.

**informer** · 26/11/2016, 23h10

Merci beaucoup jreaux62 pour ton excellent exemple qui complète ta première réponse.

Je comprends maintenant parfaitement l'utilisation de addClass et te removeClass.

Encore un grand merci

Comment appliquer un CSS en fonction de événement $(window).resize

CSS

Discussions similaires

Partager

Partager