Адаптивное меню

@AlexShev64Rus · Регистрация: 09.10.2019

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

Здравствуйте, форумчане. Недавно начал изучать javascript и решил сделать адаптивную верстку. Но не фортонуло, не получилось. Можете подсказать, что не так с моим кодом, почему когда я нажимаю на меню, кнопка меню пропадает и всё? А должны были выпадать пункты меню.

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
<!DOCTYPE html>
 
<html>
 
<head>
 
    <title>
        Макет
    </title>
 
    <meta charset="utf-8"/>
    <link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <script type="text/javascript" src="script.js"></script>
</head>
 
<body>
    <header>
        <div class="logo">
            <a id="addButton" href="#"><img height="100" width="400" alt="" src="images/logo.png"></a>
        </div>
    </header>
    <nav>
        <div class="topNav" id="abrakadabra">
        <a href="#" class="icon" id="icone" onclick="myFunction()">☰ Меню</a>
            <div class="menu">
            <ul class="menu">
                <li class="home"><a href="index.html">Пункт1</a></li>
                <li class="submenu"><a href="history.html">Пункт2</a>
                    <ul class="submenu">
                        <li><a href="begining.html">Подпункт1</a></li>
                        <li><a href="important_fights.html">Подпункт2</a></li>
                        <li><a href="cities-heroes.html">Подпункт3</a></li>
                        <li><a href="ending">Подпункт4</a></li>
                    </ul></li>
                <li><a href="songs.html">Пункт3</a></li>
                <li><a href="parades.html">Пункт4</a></li>
                <li><a href="actions.html">Пункт5</a></li>
            </ul>
            </div>
        </div>
    </nav>
</body>
</html>
</body>
</html>

CSS
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
*
{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Comfortaa', cursive;
}
 
header
{
    background: #ff6600;
    width: 100%;
    display: flex;
    justify-content: center;
 
}
.logo img{
    padding: 7px 5px 0;
    max-width: 100%;
    box-sizing: border-box;
}
nav{
    font-size: 20px;
    margin: 13px auto;
    width: 697px;
    background: #ffffff;
}
nav a{
    color: #cc6633;
    padding: 10px 12px;
    text-align: center;
    border: 2px solid #ff6600;
 
}
nav a:hover{
    background: #ff6600;
    color: #ffffff;
}
.icon{
    display: none;
}
nav a{
    text-decoration: none;
}
nav li{
    text-decoration: none;
    list-style: none;
}
.menu{
    position: relative;
    background: #ffffff;
}
.menu li{
    display: inline-block;
}
ul.submenu{
    position: absolute;
    width: 270px;
    top: 35px;
    display: none;
 
}
.submenu{
    background: #ffffff;
}
.submenu li{
    margin: 15px 0;
}
.submenu:hover > .submenu{
    display: block;
}
@media screen and (max-width: 768px)
{
    nav{
        width: 100%;
    }
    .icon{
        display: inline-block;
        margin-top: -12px; 
    }
    .menu{
        display: none;
    }
    nav{
        position: relative;
    }
    .menu.responsive{
        display: block;
        max-width: 183px;
        position: absolute;
 
    }
    .menu li{
        margin: 18px 0 10px 0;
    }
    ul.submenu{
    position: absolute;
    width: 270px;
    left: 0;
    top: 105px;
    display: none;
 
    }
    .submenu li{
        margin: 15px 0;
        width: 270px;
    }
    .submenu:hover > .submenu{
        display: inline-block;
    }
    .icon{
        display: inline-block;
        margin-top: -12px; 
    }
 
}

JavaScript
1
2
3
4
5
6
7
8
9
function myFunction() {
    var x = document.getElementById("abrakadabra");
    if (x.className === "menu") {
        x.className += " responsive";
        return false;
    } else {
        x.className = "menu";
    }
}

@DrType · 18.02.2020, 18:05

Я не проверял код, но если Вам нужно добавить класс элементу, то в 4 строке JS-кода следует написать

JavaScript
1
x.classList.add('responsive')

Добавлено через 4 минуты
Соответственно, в 7 строке

JavaScript
1
x.classList.remove('responsive')

Добавлено через 6 минут
Но так это не заработает, я могу переписать, если не опередят

@D_Vik · 18.02.2020, 18:13

А лучше использовать такое дело

JavaScript
1
x.classList.toggle('responsive')

Добавлено через 4 минуты
Под спойлером ученическое респонсивное меню, если нужно, заберете посмотрите как оно там.

Кликните здесь для просмотра всего текста

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/style.css">
  <script src="/script.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="wraper">
    <header class="header">
      <div class="container">
        <div class="header__body">
          <a href="/" class="header__logo"><h1 class="logo-text">My Logo</h1></a>
          <div class="menu-trigger"><span class="line"></span></div>
          <nav class="menu">
            <ul class="menu__items">
              <li class="menu__item"><a href="/" class="menu__link">Home</a></li>
              <li class="menu__item"><a href="/" class="menu__link">Shop</a></li>
              <li class="menu__item"><a href="/" class="menu__link">Blog</a></li>
              <li class="menu__item"><a href="/" class="menu__link">Follow us</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
  </div>
</body>
</html>

CSS
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
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}.container {
  max-width: 1180px;
  margin: auto;
  padding: 0px 5px;
}.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}.header:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: indigo;
}.header__body {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}.logo-text {
  position: relative;
  font-size: 25px;
  color: white;
  z-index: 3;
}.menu__items {
  display: flex;
}.menu__item {
  margin: 0px 0px 0px 20px;
}.menu__link {
  text-transform: uppercase;
  font-size: 18px;
  color: white;
}
 
 
@media (max-width: 767px) {
  
  body .lock {
    overflow: hidden;
  }.header__body {
    height: 50px;
  }.header:before {
    z-index: 2;
  }.line {
    position: absolute;
    background-color: white;
    left: 0;
    width: 100%;
    height: 2px;
    top: 9px;
  }.menu-trigger {
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
    z-index: 3;
  }.menu-trigger:before,
  .menu-trigger:after {
    content: '';
    background-color: white;
    position: absolute;
    width: 100%;
    height: 2px;
    transition: .3s;
  }.menu-trigger:before {
    top: 0;
  }.menu-trigger:after {
    bottom: 0;
  }.menu-trigger.active .line {
    transform: scale(0);
    transition: .3s;
  }.menu-trigger.active:before {
    transform: rotate(-45deg);
    top: 9px;
  }.menu-trigger.active:after {
    transform: rotate(45deg);
    bottom: 9px;
  }.menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: violet;
    padding: 70px 0px 0px 0px;
    transition: .5s;
  }.menu.active {
    top: 0;
    transition: .5s;
  }.menu__items {
    display: block;
  }.menu__item {
    margin: 0px 0px 20px 0px;
    text-align: center;
  }
  
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
window.addEventListener('load', (event) => {
  const body = document.querySelector('body');
  const menu = document.querySelector('.menu');
  const menu_trigger = document.querySelector('.menu-trigger');
 
  menu_trigger.addEventListener('click', (event) => {
    body.classList.toggle('lock');
    menu.classList.toggle('active');
    menu_trigger.classList.toggle('active');
  })
})

@AlexShev64Rus · 18.02.2020, 18:34 **[ТС]**

Не заработало

. Если не затруднит можете переписать?

@DrType · 18.02.2020, 21:57

AlexShev64Rus, я переделал всё так, чтобы кнопка находилась вне самого меню, иначе она исчезнет вместе с ним, и мы не сможем вернуть меню обратно.
В данном случае проще не добавлять класс, а просто изменить его.

JavaScript
1
2
3
4
5
6
7
8
9
function myFunction() {
    const x = document.getElementById("responsive");
    if (x.className == "menu") {
        x.className+="_responsive";
        //return false;
    } else {
        x.className = "menu";
    }
}

CSS
1
2
3
4
.menu_responsive{
        display: block;
        max-width: 183px;
        position: absolute;}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <nav>
        <a href="#" class="icon" id="icone" onclick="myFunction()">☰ Меню</a>
        <div class="topNav" id="abrakadabra">
        <!--<a href="#" class="icon" id="icone" onclick="myFunction()">☰ Меню</a>-->
            <div id="responsive" class="menu">
            <ul>
                <li class="home"><a href="index.html">Пункт1</a></li>
                <li class="submenu"><a href="history.html">Пункт2</a>
                    <ul class="submenu">
                        <li><a href="begining.html">Подпункт1</a></li>
                        <li><a href="important_fights.html">Подпункт2</a></li>
                        <li><a href="cities-heroes.html">Подпункт3</a></li>
                        <li><a href="ending">Подпункт4</a></li>
                    </ul></li>
                <li><a href="songs.html">Пункт3</a></li>
                <li><a href="parades.html">Пункт4</a></li>
                <li><a href="actions.html">Пункт5</a></li>
            </ul>
            </div>
        </div>
    </nav>

https://codepen.io/Berners-Lee... itors=0101

Не по теме:

В стилях кое-что поломал: у меня то экран широкий, а мне надо было проверить...

Добавлено через 9 минут
А добавлять классы надо как-то так:

JavaScript
1
if(!x.classList.contains("responsive")){x.classList.add("responsive")} else{x.classList.remove("responsive")}

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@AlexShev64Rus 0 / 0 / 0 Регистрация: 09.10.2019 Сообщений: 6
	18.02.2020, 18:34 [ТС]
	Не заработало . Если не затруднит можете переписать? 0

Адаптивное меню

Решение