1 pièce(s) jointe(s)
Peut-on calculer une largeur et déplacer un li dans un autre ul
Bonjour à tous,
(Si les Flex ne répondent pas à ma question, est-ce qu'un modérateur peut déplacer ce message dans jQuery?)
Pour découvrir les flex, j'ai construis un menu horizontal, dont voici le résultat (élargissez votre navigateur au maximum)
https://www.eco-sensors.ch/temp/e-panel/
J'ai mis volontairement
Code:
1
2
3
| nav.e-panel-row ul{
flex-wrap: nowrap;
} |
pour vous expliquer mon problème.
Aussi, notez que mon but est de faire au maximum avec des flex avant de me retourner sur jQuery. C'est pourquoi, je m'adresse d'abord ici.
Je souhaiterais, qu'au fure et à mesure que mon navigateur diminue dans sa largeur, que mes li qui se trouvent à droite de mon menu, se placent dans mon hamburger, soit avant le menu "menu 1 caché"
Je précise (voir l'image attachée), je souhaite en fait que lorsque l'on diminue le navigateur, le hamburger remplacera le menu "New Item 3" et ce dernier se placera dans le hamburger.
(Le hamburger, à droit, sera caché, plus tard et apparaîtra quand le li du menu auront atteint la largeur maximal)
Pour continuer, voici mon code HTML du menu
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
| <section class="e-panel">
<nav class="e-panel-row" aria-label="Main navigation">
<ul class="e-justify-content-space-beween bg-black">
<li class="hasChildren">
<div>
<a href="#">A propo</a>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-angle-down"></i>
</a>
</div>
<ul class="sub-menu" role="group">
<li>
<div>
<a href="#">Nous</a>
</div>
</li>
<li class="hasChildren">
<div>
<a href="#">Histoire</a>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-angle-down"></i>
</a>
</div>
<ul class="sub-menu" role="group">
<li>
<div>
<a href="#">Création</a>
</div>
</li>
<li class="hasChildren">
<div>
<a href="#">Nos investisseurs</a>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-angle-down"></i>
</a>
</div>
<ul class="sub-menu">
<li>
<div>
<a href="#">Entreprise SA</a>
</div>
</li>
<li>
<div>
<a href="#">Association</a>
</div>
</li>
<li>
<div>
<a href="#">Fundation</a>
</div>
</li>
</ul>
</li>
<li>
<div>
<a href="#">Développement</a>
</div>
</li>
</ul>
</li>
<li>
<div>
<a href="#">Situation</a>
</div>
</li>
</ul>
</li>
<li class="hasChildren">
<div>
<a href="#">Team</a>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-angle-down"></i>
</a>
</div>
<ul class="sub-menu" role="group">
<li>
<div>
<a href="#">Direction</a>
</div>
</li>
<li>
<div>
<a href="#">Secrétaires</a>
</div>
</li>
<li>
<div>
<a href="#">Collaborateurs</a>
</div>
</li>
<li>
<div>
<a href="#">Partenaires</a>
</div>
</li>
</ul>
</li>
<li class="hasChildren">
<div>
<a href="#">Contact</a>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-angle-down"></i>
</a>
</div>
<ul class="sub-menu" role="group">
<li>
<div>
<a href="#">Adresse</a>
</div>
</li>
<li>
<div>
<a href="#">Téléphone</a>
</div>
</li>
<li>
<div>
<a href="#">e-mail</a>
</div>
</li>
</ul>
</li>
<li class="hasChildren">
<div>
<a href="#">Nous cours</a>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<i class="fa fa-angle-down"></i>
</a>
</div>
<ul class="sub-menu" role="group">
<li>
<div>
<a href="#">CSS Flex</a>
</div>
</li>
<li>
<div>
<a href="#">Boostrap</a>
</div>
</li>
<li>
<div>
<a href="#">Django</a>
</div>
</li>
<li>
<div>
<a href="#">React</a>
</div>
</li>
<li>
<div>
<a href="#">jQuery</a>
</div>
</li>
</ul>
</li>
<li>
<div>
<a href="#">Contact</a>
</div>
</li>
<li>
<div>
<a href="#">New item 1</a>
</div>
</li>
<li>
<div>
<a href="#">New item 1</a>
</div>
</li>
<li>
<div>
<a href="#">New item 3</a>
</div>
</li>
<li id="hamburger" class="hasChildren">
<div>
<a href="#" class="dropdown-toggle" aria-expanded="false">
<span class="fa fa-navicon"></span>
</a>
</div>
<ul class="sub-menu">
<li>
<div>
<a href="#">Menu caché 1</a>
</div>
</li>
<li>
<div>
<a href="#">Menu caché 2</a>
</div>
</li>
<li>
<div>
<a href="#">Menu caché 3</a>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</section>
</section> |
el css
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
| /* GENERAL */
/* ul li */
i{
width: 8px;
}
/* First level */
nav.e-panel-row ul{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
margin: 0 auto;
list-style: none;
box-sizing: border-box;
padding: 0px;
}
nav.e-panel-row ul li{
font-size: 1em;
/*border: solid 3px red !important;*/
position: relative;
flex: 1 0 auto;
text-align: center;
}
nav.e-panel-row ul li div{
padding: 10px;
}
/* hasChildren */
nav.e-panel-row ul li.hasChildren{
}
nav.e-panel-row ul li.hasChildren ul.sub-menu{
display: none;
position: absolute;
z-index: 1000;
background-color: #666;
width: 100%;
}
nav.e-panel-row ul li.hasChildren ul.sub-menu.toggled-on{
display: flex;
flex-wrap: wrap;
flex-direction: column;
box-sizing: border-box;
}
nav.e-panel-row ul li.hasChildren ul.sub-menu.toggled-on li{
flex: 1 1 auto;
}
nav.e-panel-row ul li.hasChildren ul.sub-menu.toggled-on li.hasChildren ul.sub-menu{
position: relative;
}
nav.e-panel-row ul li:hover{
background-color: #333333;
}
#hamburger span{
width: 15px;
} |
Mes questions:
Dans le but de privilégier les Flex avant d'utiliser le jQuery
Q1. Est-ce possible de calculer la largeur des li du premier niveau, sans tenir compte du li#hamburger. Il sera donc caché avec cette propriété
Code:
1
2
3
4
5
6
7
| li#hamburger{
display: none;
}
/*ou avec un départ comme ceco */
li#hamburger{
flex: 0 0 0px;
} |
Q2. Est-ce que Flex permet de comparer des largeurs, comme la largeur du li du premier niveau et la largeur du conteneur, soit de nav
Q3. J'ai vu que l'on peut ordoner des flex, avec la propriété order:1. Mais dans l'exemple que j'ai vu, les éléments se trouvent dans le même conteneur. Alors que dans mon cas, je veux déplacer un li dans un 'ul.sub-menu', donc dans un conteneur enfant. Je pense que pour cela, je dois passer à jQuery pour déplacer un élément.
Je pense que pour Q1 à 3, je dois faire usage de jQuery, mais je voulais connaître votre avis pour pousser les limites avec Flex
Merci et bonne journée
