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

Version imprimable

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:

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:

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 :pingoin2:

Bonjour,

Citation:

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

http://www.developpez.com/template/kit/kitwarning.png 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.

26/11/2016, 15h01
Invité
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:

#wb_ResponsiveMenu1.la_classe {...}

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:

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;
}

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

1 2 3 4 [id^=ResponsiveMenu1-submenu]:checked + ul { display: block !important; }
pourrait (devrait) s’écrire comme suit
Code:

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

Avec "ma" solution* :

Code:

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:

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.

26/11/2016, 23h10
informer

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 :pingoin2: