Как сделать выпадающее меню переключающееся по клику?

@trofey2 · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

мне сказали тут что делать такое меню через Input неправильно, лучше с js
подскажите тогда как его сделать с js? еще хотелось бы чтобы оно закрывалось по клику кроме того

krvsa · 31.10.2025, 17:24

Сообщение от trofey2

подскажите тогда как его сделать с js?

Если загуглить "js выпадающее меню" - будет предложено много вариантов.

Вот один из вариантов...

PHP/HTML
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
<style>
/* Кнопка выпадающего списка */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
 
/* Кнопка выпадающего меню при наведении и фокусировке */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
 
/* Контейнер <div> - необходим для размещения выпадающего содержимого */
.dropdown {
  position: relative;
  display: inline-block;
}
 
/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
 
/* Ссылки внутри выпадающего списка */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
 
/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover {background-color: #ddd}
 
/* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
.show {display:block;}
</style>
<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Выпадающий</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Ссылка 1</a>
    <a href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
  </div>
</div>
<script>
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
 
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>

https://www.schoolsw3.com/howt... opdown.php

Добавлено через 1 минуту
Вот еще статья с примером...
https://doka.guide/recipes/dropdown-menu

@Zloyalex100 · 03.11.2025, 09:51

Недавно выкладывал свой вариант анимировано выпадающего меню. Делал давно, поэтому наверное не совсем современная реализация. Но работает. И выпадает и назад впадает... По клику на кнопке. CSS почти нет, а то что есть только для оформления, вся логика на JS

HTML5
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        div {
            background-color: red;
            color: white;
            height: 0px;
            width: 60px;
        }       
    </style>
</head>
<body>
<input type="button" id="text" value="open/close">
    <div id="div">
        <p>menu 1</p>
        <p>menu 2</p>
        <p>menu 3</p>
        <p>menu 4</p>
        <p>menu 5</p>
    </div>
    <script>
    var flag = true;    
    var h = 0;
    var openM;
    var closeM;
    function op () {
        div.style.height = h + 'px';
        h++;
    if(h > 0 && h < 170) {
    text.disabled = true;
    }
        if (h == 170) {
    clearInterval(openM);
    text.disabled = false;
    }
        flag = false;       
    }
    function cl () {
        div.style.height = h + 'px';
        h--;
     if(h > 0 && h < 170) {
    text.disabled = true;
    }
        if (h == -1) {
    clearInterval(closeM);
    text.disabled = false;
    }
        flag = true;
    //text.disabled = false;
    }       
        text.onclick = function () {
            if (flag) {
                openM = setInterval(op, 5)              
            } else {
                closeM = setInterval(cl, 5)
            }
        }
    </script>
</body>
</html>

@trofey2 · 03.11.2025, 13:15 **[ТС]**

krvsa, а как сделать если надо чтобы было несколько меню как здесь? -

HTML5
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
      background-color: white;
    }
    .menu {
      background-color: black;
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
        
    }
    .main-menu {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .secondary-menu {
      align-content: center;
    }
    ul li {
      color: white;
      display: inline-block;
      vertical-align: middle;
      padding-right: 20px;
    }
    .flex-menu {
      display: flex;
    }
    .first-menu-line {
      vertical-align: middle;
    }
    .first-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .second-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .third-menu ul li {
      display: flex;
      flex-direction: column;
    }
    /* Кнопка выпадающего списка */
    .dropbtn {
      background-color: #3498DB;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;  
    }
 
    /* Кнопка выпадающего меню при наведении и фокусировке */
    .dropbtn:hover, .dropbtn:focus {
      background-color: #2980B9;
    }
 
    /* Контейнер <div> - необходим для размещения выпадающего содержимого */
    .dropdown {
      position: relative;
      display: inline-block;
    }
 
    /* Выпадающее содержимое (скрыто по умолчанию) */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
 
    /* Ссылки внутри выпадающего списка */
    dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
 
    /* Изменение цвета выпадающих ссылок при наведении курсора */
    .dropdown-content a:hover {background-color: #ddd}
 
    /* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
    .show {display:block;}
    
</style>
</head>
<body>
  <div class="menu">
    <nav class="main-menu">
      <p class="first-menu-line"></p>
        <img src="img/logo.svg" height="30px" width="auto">
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Domains</button>
              <div id="myDropdown" class="dropdown-content">
                <div class="flex-menu">
                  <div class="first-menu">
                    <ul>
                      <li>Find a Domain</li>
                      <a href="materials" class="menu-item">Search for Domain Names</a>
                      <a href="about" class="menu-item">Transfer Domain Names</a>
                      <a href="contacts" class="menu-item">gTLD Domain Extensions</a>
                    </ul>
                  </div>
                  <div class="second-menu">
                    <ul>
                      <li>Domain Investing</li>
                      <li><a href="materials" class="menu-item">Auctions for Domain Names</a></li>
                      <li><a href="about" class="menu-item">Appraise Domain Name Value</a></li>
                      <li><a href="contacts" class="menu-item">Discount Domain Club</a></li>
                    </ul>
                  </div> 
                  <div class="third-menu">
                    <ul>
                      <li>Domain Tools and Services</li>
                      <li><a href="materials" class="menu-item">Find a Domain Owner (WHOIS)</a></li>
                      <li><a href="about" class="menu-item">Generate Domain Names</a></li>
                      <li><a href="contacts" class="menu-item">Bulk Domain Search</a></li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>  
          <script>
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
 
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Websites</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>GoDaddy Website Builder</li>
                    <li><a href="materials" class="menu-item">Website Builder Free Trial</a></li>
                    <li><a href="about" class="menu-item">Website Templates</a></li>
                    <li><a href="contacts" class="menu-item">Online Store</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Hire an Expert</li>
                    <li><a href="materials" class="menu-item">Website Design Services</a></li> 
                  </ul>
                </div>
              </div>
            </div>   
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Hosting</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Web Hosting</li>
                    <li><a href="materials" class="menu-item">Hosting for WordPress</a></li>
                    <li><a href="about" class="menu-item">VPS Hosting</a></li>
                    <li><a href="contacts" class="menu-item">All Hosting Options</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Tools for Freelancers</li>
                    <li><a href="materials" class="menu-item">GoDaddy Hub Client Dashboard</a></li> 
                  </ul>
                </div>  
              </div>        
            </div>
          </div>
          <p><a href="e-mail">E-mail</a></p>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Security</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>SSL Certificates</li>
                    <li><a href="materials" class="menu-item">SSL Certificates</a></li>
                    <li><a href="about" class="menu-item">Managed SSL Certificates</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Web Security</li>
                    <li><a href="materials" class="menu-item">Website Security</a></li> 
                    <li><a href="materials" class="menu-item">All Web Security Options</a></li>
                  </ul>
                </div>   
              </div>
            </div>         
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Marketing</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Marketing Tools</li>
                    <li><a href="materials" class="menu-item">Digital Marketing</a></li>
                    <li><a href="about" class="menu-item">Logo Maker</a></li>
                    <li><a href="about" class="menu-item">Unified Inbox</a></li>
                    <li><a href="about" class="menu-item">Content & Photo Creator</a></li>
                  </ul>
                </div>
              </div>
            </div>        
          </div>
          <p><a href="e-mail">GoDaddy Airo®</a></p>
          <p><a href="e-mail">Pricing</a></p>
        </nav>
        <nav class="secondary-menu">
            <ul class="second-menu-line">
                <li>Contact Us</li>
                <li>Help</li>
                <li>Sign In</li>
                <li>Cart</li>
            </ul>
        </nav>
    </div>
    
</body>

krvsa · 03.11.2025, 14:48

Сообщение от trofey2

а как сделать если надо чтобы было несколько меню как здесь?

Есть такое выражение - по аналогии.

Поскольку это всего лишь примеры. Берешь идею и развиваешь ее как тебе угодно.

Добавлено через 1 минуту
trofey2, зачем тебе столько тегов?

@Zloyalex100 · 04.11.2025, 17:29

Сообщение от trofey2

а как сделать если надо чтобы было несколько меню как здесь

Вот для подобных вещей и придумали такое замечательное явление как функция

@Zloyalex100 · 05.11.2025, 08:29

В реальном DOM-дереве на div нужно будет повесить CSS-свойство position : absolute

@sad67man · 05.11.2025, 18:45

Сообщение от trofey2

krvsa, а как сделать если надо чтобы было несколько меню как здесь? -

У вас же уже было заверстано, можно было поменять css с .dropdown :checked на класс .dropdown.active
Потом уже при помощи js переключать этот класс.

Если брать последний пример

Сообщение от trofey2

JavaScript
1
2
3
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Тут проблема в том, что id Должен быть уникальным и не может повторяться. Тут будет браться всегда первый найденный элемент.

Можно так же сделать через класс active

CSS
1
2
3
4
5
6
7
.dropdown.active .dropbtn {
  background-color: #1d587e;
}
 
.dropdown.active .dropdown-content {
  display:block;
}

Нам важно на какую именно кнопку нажали.. Отловить ее можно разными способами, допустим через event.target

JavaScript
1
2
3
4
5
function myFunction() {
  const button = this.event.target;
  const dropdown = button.closest('.dropdown');
  dropdown.classList.toggle("active");
}

Закрытие при клике за пределами

JavaScript
1
2
3
4
5
6
7
8
9
10
window.addEventListener('click', (event) => {
  let dropdowns = Array.from(document.querySelectorAll('.dropdown.active'));
  let current = event.target.closest('.dropdown');
 
  if (current) {
    dropdowns = dropdowns.filter(el => el !== current);
  }
 
  dropdowns.forEach(el => el.classList.remove('active'))
})

@trofey2 · 07.11.2025, 13:19 **[ТС]**

спасибо, все заработало. только еще один момент не подскажете в самом первом меню когда оно открывается почему там пункты меню сначала идут в строчку, а не столбцом, как это сделать?

HTML5
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
      background-color: white;
    }
    .menu {
      background-color: black;
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
        
    }
    .main-menu {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .secondary-menu {
      align-content: center;
    }
    ul li {
      color: rgb(0, 0, 0);
      display: inline-block;
      vertical-align: middle;
      padding-right: 20px;
    }
    .flex-menu {
      display: flex;
    }
    .first-menu-line {
      vertical-align: middle;
    }
    .first-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .second-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .third-menu ul li {
      display: flex;
      flex-direction: column;
    }
 
    p a {
      color: white;
    }
    
    /* Кнопка выпадающего списка */
    .dropbtn {
      background-color: #000000;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;  
    }
 
    /* Кнопка выпадающего меню при наведении и фокусировке */
    .dropbtn:hover, .dropbtn:focus {
      background-color: #5e5e5e;
    }
 
    /* Контейнер <div> - необходим для размещения выпадающего содержимого */
    .dropdown {
      display: inline-block;
    }
 
    /* Выпадающее содержимое (скрыто по умолчанию) */
    .dropdown-content {
      display: none;
      width: 100%;
      position: absolute;
      top: 60px;
      left: 0px;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
 
    /* Ссылки внутри выпадающего списка */
    dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
 
    /* Изменение цвета выпадающих ссылок при наведении курсора */
    .dropdown-content a:hover {background-color: #ddd}
 
    /* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
    .show {display:block;}
    .dropdown.active .dropbtn {
      background-color: #5e5e5e;
    }
 
    .dropdown.active .dropdown-content {
      display:block;
    }
</style>
</head>
<body>
  <div class="menu">
    <nav class="main-menu">
      <p class="first-menu-line"></p>
        <img src="img/logo.svg" height="30px" width="auto">
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Domains</button>
              <div id="myDropdown" class="dropdown-content">
                <div class="flex-menu">
                  <div class="first-menu">
                    <ul>
                      <li>Find a Domain</li>
                      <a href="materials" class="menu-item">Search for Domain Names</a>
                      <a href="about" class="menu-item">Transfer Domain Names</a>
                      <a href="contacts" class="menu-item">gTLD Domain Extensions</a>
                    </ul>
                  </div>
                  <div class="second-menu">
                    <ul>
                      <li>Domain Investing</li>
                      <li><a href="materials" class="menu-item">Auctions for Domain Names</a></li>
                      <li><a href="about" class="menu-item">Appraise Domain Name Value</a></li>
                      <li><a href="contacts" class="menu-item">Discount Domain Club</a></li>
                    </ul>
                  </div> 
                  <div class="third-menu">
                    <ul>
                      <li>Domain Tools and Services</li>
                      <li><a href="materials" class="menu-item">Find a Domain Owner (WHOIS)</a></li>
                      <li><a href="about" class="menu-item">Generate Domain Names</a></li>
                      <li><a href="contacts" class="menu-item">Bulk Domain Search</a></li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>  
          <script>
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() {
  const button = this.event.target;
  const dropdown = button.closest('.dropdown');
  dropdown.classList.toggle("active");
}
 
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.addEventListener('click', (event) => {
  let dropdowns = Array.from(document.querySelectorAll('.dropdown.active'));
  let current = event.target.closest('.dropdown');
 
  if (current) {
    dropdowns = dropdowns.filter(el => el !== current);
  }
 
  dropdowns.forEach(el => el.classList.remove('active'))
})
</script>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Websites</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>GoDaddy Website Builder</li>
                    <li><a href="materials" class="menu-item">Website Builder Free Trial</a></li>
                    <li><a href="about" class="menu-item">Website Templates</a></li>
                    <li><a href="contacts" class="menu-item">Online Store</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Hire an Expert</li>
                    <li><a href="materials" class="menu-item">Website Design Services</a></li> 
                  </ul>
                </div>
              </div>
            </div>   
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Hosting</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Web Hosting</li>
                    <li><a href="materials" class="menu-item">Hosting for WordPress</a></li>
                    <li><a href="about" class="menu-item">VPS Hosting</a></li>
                    <li><a href="contacts" class="menu-item">All Hosting Options</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Tools for Freelancers</li>
                    <li><a href="materials" class="menu-item">GoDaddy Hub Client Dashboard</a></li> 
                  </ul>
                </div>  
              </div>        
            </div>
          </div>
          <p><a href="e-mail">E-mail</a></p>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Security</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>SSL Certificates</li>
                    <li><a href="materials" class="menu-item">SSL Certificates</a></li>
                    <li><a href="about" class="menu-item">Managed SSL Certificates</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Web Security</li>
                    <li><a href="materials" class="menu-item">Website Security</a></li> 
                    <li><a href="materials" class="menu-item">All Web Security Options</a></li>
                  </ul>
                </div>   
              </div>
            </div>         
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Marketing</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Marketing Tools</li>
                    <li><a href="materials" class="menu-item">Digital Marketing</a></li>
                    <li><a href="about" class="menu-item">Logo Maker</a></li>
                    <li><a href="about" class="menu-item">Unified Inbox</a></li>
                    <li><a href="about" class="menu-item">Content & Photo Creator</a></li>
                  </ul>
                </div>
              </div>
            </div>        
          </div>
          <p><a href="e-mail">GoDaddy Airo®</a></p>
          <p><a href="e-mail">Pricing</a></p>
        </nav>
        <nav class="secondary-menu">
            <ul class="second-menu-line">
                <li>Contact Us</li>
                <li>Help</li>
                <li>Sign In</li>
                <li>Cart</li>
            </ul>
        </nav>
    </div>
    
</body>

извините сам разобрался, помощь больше не требуется)

@Zloyalex100 · 07.11.2025, 17:41

А, тут речь про другое меню... Я думал требуется что-то подобное тому что было в старом Ворде и Экселе

Добавлено через 2 часа 15 минут

Сообщение от trofey2

идут в строчку, а не столбцом

А вот у меня как раз идут столбцом. Как и принято в классических выпадающих меню

@trofey2 · 10.11.2025, 16:00 **[ТС]**

подскажите как еще сделать при клике на пункт меню чтобы рядом с ним была стрелочка которая бы по клику меняла свое направления с верха на низ и наоборот и меняла свой цвет?
пока у меня все так выглядит

HTML5
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
      background-color: white;
    }
    .menu {
      background-color: black;
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
        
    }
    .main-menu {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .secondary-menu {
      align-content: center;
    }
    ul li {
      color: rgb(0, 0, 0);
      display: inline-block;
      vertical-align: middle;
      padding-right: 20px;
    }
    .flex-menu {
      display: flex;
    }
    .first-menu-line {
      vertical-align: middle;
    }
    .first-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .second-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .third-menu ul li {
      display: flex;
      flex-direction: column;
    }
 
    p a {
      color: white;
    }
    
    /* Кнопка выпадающего списка */
    .dropbtn {
      background-color: #000000;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;  
    }
 
    /* Кнопка выпадающего меню при наведении и фокусировке */
    .dropbtn:hover, .dropbtn:focus {
      background-color: #5e5e5e;
    }
 
    /* Контейнер <div> - необходим для размещения выпадающего содержимого */
    .dropdown {
      display: inline-block;
    }
 
    /* Выпадающее содержимое (скрыто по умолчанию) */
    .dropdown-content {
      display: none;
      width: 100%;
      position: absolute;
      top: 60px;
      left: 0px;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
 
    /* Ссылки внутри выпадающего списка */
    dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
 
    /* Изменение цвета выпадающих ссылок при наведении курсора */
    .dropdown-content a:hover {background-color: #ddd}
 
    /* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
    .show {display:block;}
    .dropdown.active .dropbtn {
      background-color: #5e5e5e;
    }
 
    .dropdown.active .dropdown-content {
      display:block;
    }
</style>
</head>
<body>
  <div class="menu">
    <nav class="main-menu">
      <p class="first-menu-line"></p>
        <img src="img/logo.svg" height="30px" width="auto">
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Domains</button>
              <div id="myDropdown" class="dropdown-content">
                <div class="flex-menu">
                  <div class="first-menu">
                    <ul>
                      <li>Find a Domain</li>
                      <li><a href="materials" class="menu-item">Search for Domain Names</a></li>
                      <li><a href="about" class="menu-item">Transfer Domain Names</a></li>
                      <li><a href="contacts" class="menu-item">gTLD Domain Extensions</a></li>
                  </ul>
                  </div>
                  <div class="second-menu">
                    <ul>
                      <li>Domain Investing</li>
                      <li><a href="materials" class="menu-item">Auctions for Domain Names</a></li>
                      <li><a href="about" class="menu-item">Appraise Domain Name Value</a></li>
                      <li><a href="contacts" class="menu-item">Discount Domain Club</a></li>
                    </ul>
                  </div> 
                  <div class="third-menu">
                    <ul>
                      <li>Domain Tools and Services</li>
                      <li><a href="materials" class="menu-item">Find a Domain Owner (WHOIS)</a></li>
                      <li><a href="about" class="menu-item">Generate Domain Names</a></li>
                      <li><a href="contacts" class="menu-item">Bulk Domain Search</a></li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>  
          <script>
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() {
  const button = this.event.target;
  const dropdown = button.closest('.dropdown');
  dropdown.classList.toggle("active");
}
 
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.addEventListener('click', (event) => {
  let dropdowns = Array.from(document.querySelectorAll('.dropdown.active'));
  let current = event.target.closest('.dropdown');
 
  if (current) {
    dropdowns = dropdowns.filter(el => el !== current);
  }
 
  dropdowns.forEach(el => el.classList.remove('active'))
})
</script>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Websites</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>GoDaddy Website Builder</li>
                    <li><a href="materials" class="menu-item">Website Builder Free Trial</a></li>
                    <li><a href="about" class="menu-item">Website Templates</a></li>
                    <li><a href="contacts" class="menu-item">Online Store</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Hire an Expert</li>
                    <li><a href="materials" class="menu-item">Website Design Services</a></li> 
                  </ul>
                </div>
              </div>
            </div>   
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Hosting</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Web Hosting</li>
                    <li><a href="materials" class="menu-item">Hosting for WordPress</a></li>
                    <li><a href="about" class="menu-item">VPS Hosting</a></li>
                    <li><a href="contacts" class="menu-item">All Hosting Options</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Tools for Freelancers</li>
                    <li><a href="materials" class="menu-item">GoDaddy Hub Client Dashboard</a></li> 
                  </ul>
                </div>  
              </div>        
            </div>
          </div>
          <p><a href="e-mail">E-mail</a></p>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Security</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>SSL Certificates</li>
                    <li><a href="materials" class="menu-item">SSL Certificates</a></li>
                    <li><a href="about" class="menu-item">Managed SSL Certificates</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Web Security</li>
                    <li><a href="materials" class="menu-item">Website Security</a></li> 
                    <li><a href="materials" class="menu-item">All Web Security Options</a></li>
                  </ul>
                </div>   
              </div>
            </div>         
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Marketing</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Marketing Tools</li>
                    <li><a href="materials" class="menu-item">Digital Marketing</a></li>
                    <li><a href="about" class="menu-item">Logo Maker</a></li>
                    <li><a href="about" class="menu-item">Unified Inbox</a></li>
                    <li><a href="about" class="menu-item">Content & Photo Creator</a></li>
                  </ul>
                </div>
              </div>
            </div>        
          </div>
          <p><a href="e-mail">GoDaddy Airo®</a></p>
          <p><a href="e-mail">Pricing</a></p>
        </nav>
        <nav class="secondary-menu">
            <ul class="second-menu-line">
                <li>Contact Us</li>
                <li>Help</li>
                <li>Sign In</li>
                <li>Cart</li>
            </ul>
        </nav>
    </div>
    
</body>

в архиве есть нужные свг на стрелочки

@trofey2 · 11.11.2025, 16:23 **[ТС]**

я пробовал типа того мне советовали в другой теме -

HTML5
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
/* Arrow on click */
.arr2 {
  display: none;
}
.arr2 ~ label {
  position: relative;
  display: inline-block;
  padding-left: 1em;
  cursor: pointer;
}
.arr2 ~ label:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background: url("img/arr.png") no-repeat;
  background-size: 1em;
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
}
.arr2:checked ~ label:before {
  transform: rotate(-90deg);
  transition: transform 0.5s ease-in-out;
}
 
h2 {
  font: bold 1em arial;
}
</style>
</head>
<body>
<h2>Rotate arrow on hover</h2>
<a href="#" class="arr1">Link</a>
<h2>Rotate arrow on click</h2>
<input type="checkbox" id="checkbox" class="arr2"><label for="checkbox">Link</label>
</body>
</html>

и вставить этот инпут в свою кнопку но так не работает перестает кнопка как надо работать, меню больше не открывает. как это лучше сделать, чтобы и меню работало и стрелочки были?

@trofey2 · 12.11.2025, 15:57 **[ТС]**

в результате сделал по другому, нашел какую-то стрелочку, прикрутил ее, она вроде переключает меню, но как сделать чтобы при нажатии на заголовок меню стрелочка переключалась? а то сейчас она переключается только при нажатии именно на стрелочку

HTML5
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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;  
    }
    body {
      background-color: white;
    }
    .menu {
      background-color: black;
      width: 100%;
      height: 60px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
        
    }
    .main-menu {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .secondary-menu {
      align-content: center;
    }
    ul li {
      color: rgb(0, 0, 0);
      display: inline-block;
      vertical-align: middle;
      padding-right: 20px;
    }
    .flex-menu {
      display: flex;
    }
    .first-menu-line {
      vertical-align: middle;
    }
    .first-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .second-menu ul li {
      display: flex;
      flex-direction: column;
    }
    .third-menu ul li {
      display: flex;
      flex-direction: column;
    }
 
    p a {
      color: white;
    }
    
    /* Кнопка выпадающего списка */
    .dropbtn {
      background-color: #000000;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;  
    }
 
    /* Кнопка выпадающего меню при наведении и фокусировке */
    .dropbtn:hover, .dropbtn:focus {
      background-color: #bebdbd;
    }
 
    /* Контейнер <div> - необходим для размещения выпадающего содержимого */
    .dropdown {
      display: inline-block;
    }
 
    /* Выпадающее содержимое (скрыто по умолчанию) */
    .dropdown-content {
      display: none;
      width: 100%;
      position: absolute;
      top: 60px;
      left: 0px;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
 
    /* Ссылки внутри выпадающего списка */
    dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
 
    /* Изменение цвета выпадающих ссылок при наведении курсора */
    .dropdown-content a:hover {background-color: #ddd}
 
    /* Показать выпадающее меню (используйте JS, чтобы добавить этот класс .dropdown-content содержимого, когда пользователь нажимает на кнопку выпадающего списка) */
    .show {display:block;}
    .dropdown.active .dropbtn {
      background-color: #5e5e5e;
    }
 
    .dropdown.active .dropdown-content {
      display:block;
    }
    .arrow-4 {
    position: relative;
    cursor: pointer;
    width: 25px;
    height: 25px;
  float: right;
}
.arrow-4-left {
    position: absolute;
    background-color: transparent;
    top: 0px;
    left: -20px;
    width: 40px;
    height: 15px;
    display: block;
    transform: rotate(35deg);
    float: right;
    border-radius: 2px;
}
.arrow-4-left:after {
    content: "";
    background-color: #ffffff;
    width: 10px;
    height: 5px;
    display: block;
    float: right;
    border-radius: 6px 10px 10px 6px;
    transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    z-index: -1;
}
 
.arrow-4-right {
    position: absolute;
    background-color: transparent;
    top: 14px;
    left: 1px;
    width: 28px;
    height: 17px;
    display: block;
    transform: rotate(-35deg);
    float: right;
    border-radius: 2px;
}
.arrow-4-right:after {
    content: "";
    background-color: #ffffff;
    width: 10px;
    height: 5px;
    display: block;
    float: right;
    border-radius: 10px 6px 6px 10px;
    transition: all 0.5s cubic-bezier(0.25, 1.7, 0.35, 0.8);
    z-index: -1;
}
.open .arrow-4-left:after {
    transform-origin: center center;
    transform: rotate(-70deg);
  background-color: #000000;
}
.open .arrow-4-right:after {
    transform-origin: center center;
    transform: rotate(70deg);
  background-color: #000000;
}
</style>
</head>
<body>
  <div class="menu">
    <nav class="main-menu">
      <p class="first-menu-line"></p>
        <img src="img/logo.svg" height="30px" width="auto">
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Domains<div class="arrow-4"><span class="arrow-4-left"></span><span class="arrow-4-right"></span></div></button>
            <script>
            $(".arrow-4").click(function() {
            $(this).toggleClass("open");
            });
            </script>
              <div id="myDropdown" class="dropdown-content">
                <div class="flex-menu">
                  <div class="first-menu">
                    <ul>
                      <li>Find a Domain</li>
                      <li><a href="materials" class="menu-item">Search for Domain Names</a></li>
                      <li><a href="about" class="menu-item">Transfer Domain Names</a></li>
                      <li><a href="contacts" class="menu-item">gTLD Domain Extensions</a></li>
                  </ul>
                  </div>
                  <div class="second-menu">
                    <ul>
                      <li>Domain Investing</li>
                      <li><a href="materials" class="menu-item">Auctions for Domain Names</a></li>
                      <li><a href="about" class="menu-item">Appraise Domain Name Value</a></li>
                      <li><a href="contacts" class="menu-item">Discount Domain Club</a></li>
                    </ul>
                  </div> 
                  <div class="third-menu">
                    <ul>
                      <li>Domain Tools and Services</li>
                      <li><a href="materials" class="menu-item">Find a Domain Owner (WHOIS)</a></li>
                      <li><a href="about" class="menu-item">Generate Domain Names</a></li>
                      <li><a href="contacts" class="menu-item">Bulk Domain Search</a></li>
                    </ul>
                  </div>
                </div>
              </div>
          </div>  
          <script>
/* Когда пользователь нажимает на кнопку,
переключение между скрытием и отображением раскрывающегося содержимого */
function myFunction() {
  const button = this.event.target;
  const dropdown = button.closest('.dropdown');
  dropdown.classList.toggle("active");
}
 
// Закройте выпадающее меню, если пользователь щелкает за его пределами
window.addEventListener('click', (event) => {
  let dropdowns = Array.from(document.querySelectorAll('.dropdown.active'));
  let current = event.target.closest('.dropdown');
 
  if (current) {
    dropdowns = dropdowns.filter(el => el !== current);
  }
 
  dropdowns.forEach(el => el.classList.remove('active'))
})
</script>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Websites</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>GoDaddy Website Builder</li>
                    <li><a href="materials" class="menu-item">Website Builder Free Trial</a></li>
                    <li><a href="about" class="menu-item">Website Templates</a></li>
                    <li><a href="contacts" class="menu-item">Online Store</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Hire an Expert</li>
                    <li><a href="materials" class="menu-item">Website Design Services</a></li> 
                  </ul>
                </div>
              </div>
            </div>   
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Hosting</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Web Hosting</li>
                    <li><a href="materials" class="menu-item">Hosting for WordPress</a></li>
                    <li><a href="about" class="menu-item">VPS Hosting</a></li>
                    <li><a href="contacts" class="menu-item">All Hosting Options</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Tools for Freelancers</li>
                    <li><a href="materials" class="menu-item">GoDaddy Hub Client Dashboard</a></li> 
                  </ul>
                </div>  
              </div>        
            </div>
          </div>
          <p><a href="e-mail">E-mail</a></p>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Security</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>SSL Certificates</li>
                    <li><a href="materials" class="menu-item">SSL Certificates</a></li>
                    <li><a href="about" class="menu-item">Managed SSL Certificates</a></li>
                  </ul>
                </div>
                <div class="second-menu">
                  <ul>
                    <li>Web Security</li>
                    <li><a href="materials" class="menu-item">Website Security</a></li> 
                    <li><a href="materials" class="menu-item">All Web Security Options</a></li>
                  </ul>
                </div>   
              </div>
            </div>         
          </div>
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Marketing</button>
            <div id="myDropdown" class="dropdown-content">
              <div class="flex-menu">
                <div class="first-menu">
                  <ul>
                    <li>Marketing Tools</li>
                    <li><a href="materials" class="menu-item">Digital Marketing</a></li>
                    <li><a href="about" class="menu-item">Logo Maker</a></li>
                    <li><a href="about" class="menu-item">Unified Inbox</a></li>
                    <li><a href="about" class="menu-item">Content & Photo Creator</a></li>
                  </ul>
                </div>
              </div>
            </div>        
          </div>
          <p><a href="e-mail">GoDaddy Airo®</a></p>
          <p><a href="e-mail">Pricing</a></p>
        </nav>
        <nav class="secondary-menu">
            <ul class="second-menu-line">
                <li>Contact Us</li>
                <li>Help</li>
                <li>Sign In</li>
                <li>Cart</li>
            </ul>
        </nav>
    </div>
    
</body>

@sad67man · 12.11.2025, 16:15

trofey2, Иконка черного цвета, на черном фоне не будет видна. Для начала нужно это исправить.

Сообщение от trofey2

но как сделать чтобы при нажатии на заголовок меню стрелочка переключалась? а то сейчас она переключается только при нажатии именно на стрелочку

Вы же отталкивайтесь от класса .dropdown.active

CSS
1
2
3
4
5
6
7
8
9
10
.dropdown.active .arrow-4-left:after {
    transform-origin: center center;
    transform: rotate(-70deg);
  background-color: #000000;
}
.dropdown.active .arrow-4-right:after {
    transform-origin: center center;
    transform: rotate(70deg);
  background-color: #000000;
}

Добавлено через 3 минуты
trofey2, Можно еще стрелочку сделать как в bootstrap через border-ы

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.dropbtn::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}
 
.dropdown.active .dropbtn::after {
    transform: rotate(180deg);
}

@trofey2 · 21.11.2025, 13:37 **[ТС]**

а как сделать чтобы в адаптиве меню рисовалось столбцом по клику на кнопку гамбургер? как тут - https://www.godaddy.com/en-ph

@sad67man · 21.11.2025, 15:29

Сообщение от trofey2

а как сделать чтобы в адаптиве меню рисовалось столбцом по клику на кнопку гамбургер? как тут - https://www.godaddy.com/en-ph

Детально тут конечно не распишешь, если только в общих чертах.

1) менюшку нужно обернуть в какой-нибудь div, чтоб потом его можно было отдельно позиционировать.
2) Через медиа-запросы @media (max-width: 768px) {
верстаете, ставите этому блоку position: fixed; flex-direction: column; и т.д.
3) При нажатии на гамбургер добавляете класс на body или html. Потому как много чего может меняться на документе (убираться скролл и т.д.) Т.е. у вас как бы 2 состояния страницы.. когда меню открыто и закрыто.
4) По данному классу через css показываете меню. Для анимации можно left менять, тогда изначально нужно его отрицательный ставить.

@trofey2 · 21.11.2025, 16:06 **[ТС]**

sad67man,
а как по нажатию показывать меню через button, это сделать скрипт по аналогии с тем что вы мне ранее писали, только поменять в нем чтобы он другую менюшку рисовал?

@sad67man · 21.11.2025, 16:38

Сообщение от trofey2

sad67man,
а как по нажатию показывать меню через button, это сделать скрипт по аналогии с тем что вы мне ранее писали, только поменять в нем чтобы он другую менюшку рисовал?

Вы про dropdown? Скрипт не поменяется. Там же при клике ставится класс .dropdown.active - этого достаточно. Меню и так показывается, просто в мобильной версии стили будут немного отличаться. Вот у .dropdown-content - position: fixed и flex-direction: column; - т.е. были в ряд, будут столбцом и позиционирование относительно экрана. Это вы стили ставите в зависимости от ширины экрана через медиа-запросы.

Точнее там будет flex-direction: column; у .flex-menu - хотя тут еще надо смотреть - нужна ли эта излишняя вложенность.

Добавлено через 13 минут
Там единственное что стрелочку "назад" нужно будет добавить, чтоб закрывать подменю.. и чтоб она показывалась только на мобильной версии. На десктопе она будет скрыта. Ну вот на нее тоже скрипт можно повесить, Которая будет удалять класс .active у dropdown
Но это потом можно сделать. Сначала сделайте без нее.

Добавлено через 9 минут

Сообщение от trofey2

sad67man,
а как по нажатию показывать меню через button, это сделать скрипт по аналогии с тем что вы мне ранее писали, только поменять в нем чтобы он другую менюшку рисовал?

А если вы про гамбургер, то нужно будет отдельный скрипт писать. Я уже говорил - он должен добавлять/удалять класс на корневой тег html или body.. А все остальное уже можно будет сделать при помощи css, отталкиваясь от этого класса.

@trofey2 · 25.11.2025, 13:55 **[ТС]**

sad67man, вроде сделал менюшку, только возник вопрос как сделать чтобы кнопка крестик была видна за пределами менюшки? а то у меня если крестик выходит за границы меню его не видно

и еще вопрос хотел сделать чтобы то что за менюшкой было размыто как тут https://www.godaddy.com/en-ph/email? пробовал backdrop-filter но почему-то не работает

@sad67man · 25.11.2025, 14:09

trofey2, Вы неправильно сделали бургер. Это не dropdown. Я же выше все расписал. При клике по нему вы должны вешать класс на тег html

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

Как сделать выпадающее меню переключающееся по клику?

Решение

Решение

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 215

	Как сделать выпадающее меню переключающееся по клику? 31.10.2025, 15:57. Показов 3371. Ответов 56 Метки нет (Все метки) мне сказали тут что делать такое меню через Input неправильно, лучше с js подскажите тогда как его сделать с js? еще хотелось бы чтобы оно закрывалось по клику кроме того 0

@Zloyalex100 93 / 88 / 17 Регистрация: 05.08.2021 Сообщений: 402
	05.11.2025, 08:29
	В реальном DOM-дереве на div нужно будет повесить CSS-свойство position : absolute 0

@trofey2 0 / 0 / 0 Регистрация: 28.12.2015 Сообщений: 215
	21.11.2025, 16:06 [ТС]
	sad67man, а как по нажатию показывать меню через button, это сделать скрипт по аналогии с тем что вы мне ранее писали, только поменять в нем чтобы он другую менюшку рисовал? 0

@sad67man 2598 / 1502 / 689 Регистрация: 23.08.2015 Сообщений: 3,804
	25.11.2025, 14:09
	trofey2, Вы неправильно сделали бургер. Это не dropdown. Я же выше все расписал. При клике по нему вы должны вешать класс на тег html 0