Peut-on calculer une largeur et déplacer un li dans un autre ul

**pierrot10** · 14/09/2022, 13h23

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

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

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

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
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 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
/* 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 CSS :

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

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

**mathieu** · 14/09/2022, 13h54

en javascript vous pouvez utiliser la méthode getBoundingClientRect d'un élément pour savoir si l'élément apparait à l'écran :
https://developer.mozilla.org/fr/doc...dingClientRect

**pierrot10** · 14/09/2022, 16h41

Salut,
Je te remercie. J'ai regardé mais je n'ai pas réussi à le faire. J'ai chercher une équivalence avec jQuery mais cela ne marche pas trop bien.

**SpaceFrog** · 15/09/2022, 08h32

Il y a quelques années je m'étais exercé sur la question:

https://www.developpez.net/forums/d2...gueur-d-texte/

**Toufik83** · 15/09/2022, 18h02

Bonjour,

Vous pouvez aussi utiliser @media pour appliquer des régles CSS lorsque la largeur du document arrive à 768px par exemple :

Code css :

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

1
2
3
4
/*Cacher le #hamburger lorsque la largeur est supérieur à 768px*/
@media only screen and (min-width: 768px){
	#hamburger{display:none}
}

Puis vous gérez le déplacement des éléments avec jQuery (ou seulement avec js, comme vous voulez...):

Code :

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

1
2
3
4
5
6
7
8
9
$(window).on("resize", function() {
  if ($(this).width() < 768) {
    $("#hamburger .sub-menu")
      .append('.e-justify-content-space-beween > li:nth-child(7),.e-justify-content-space-beween > li:nth-child(8)')
  } else {
    $('#hamburger .sub-menu > li::nth-child(4),#hamburger .sub-menu > li::nth-child(5)')
      .appendTo('.e-justify-content-space-beween');
  }
})

Peut-on calculer une largeur et déplacer un li dans un autre ul

jQuery

Discussions similaires

Partager

Partager