Не работает кнопка развёртки меню

@CoderReact · Регистрация: 09.12.2020

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

Весь код перелопатил не могу понять в чём причина, кнопка должна делать развёртку всего меню на маленьких экранах.
HTML:

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
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тест</title>
  <link rel="stylesheet" type="text/css" href=style.css>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
 </head>
 <body>
    <header> 
 <div class="logo">
    <a href="index.html"><img class="graficlogo" src="logo.png" alt="logo"></a>
 </div>
 <nav>
    <div class="topnav" id="myTopnav">
        <a href="index.html">home</a>
        <a href="project.html">projects</a>
        <a href="blog.html">blog</a>
        <a href="contacts.html">contacts</a>
        <a href="about.html">about</a>
        <a href="services.html">services</a>
        <a href="location.html">location</a>
        <a id="menu" href="#" class="icon">☰</a>
</div>
        </header>
 </body>
</html>

CSS:

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
*{
    margin: 0;
    padding: 0;
}
a{
 
    text-decoration: none;
}
li{
    text-decoration: none;
    list-style: none;
}
body{
  font-family: 'Raleway', sans-serif;
}
.logo{
    background:#000;
    width: 100%;
    display: flex;
    justify-content: center;
 
}
.graficlogo{
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
 
}
nav{
    margin: auto;
    width: 800px;
    height: 100px;
}
.topnav{
background-color: #fff;
font-size: 14px;
margin-top: 40px;
}
.topnav a{
    color:#000;
    text-align: center;
    padding: 14px 16px;
    font-size: 15px;
}
.topnav a:hover{
    border-bottom: 2px solid #000;
}
.topnav .icon{
display: none;
}
@media screen and (max-width: 768px){
        .topnav a:not(:first-child) {
         display: none;
        }
        .topnav a.icon{
            float: right;
            margin-top: -17px;
            display: block;
            color: black; 
        }
        nav{
            width: 100px;
            height: 100px;
        }
        .topnav.responsive{
            position: relative;
        }
        .topnav.responsive a.icon{
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        }
}

Функция кнопки:

JavaScript
1
2
3
4
5
6
7
8
9
menu.onclick = function myFynction() {
    var x = document.getElementById("myTopnav");
 
    if(x.class === "topnav") {    
        x.className += "responsive";
    } else {
        x.classname = "topnav";
    }
}

@DrType · 13.12.2020, 08:02

Ваш вариант сработает, если всюду в коде аккуратно прописать className (строчки 4 и 7). Но это не совсем правильная логика — скрипт не добавляет новый класс элементу responsive, как, очевидно, задумывалось, а меняет класс с topnav на topnavresponsive, в результате чего все стили, заданные для селекторов, включающих .topnav, перестают применяться.
Сделайте так:

JavaScript
1
2
3
4
menu.onclick = function myFynction() {
  var x = document.getElementById("myTopnav");
  x.classList.toggle("responsive");
};

@CoderReact · 17.12.2020, 19:08 **[ТС]**

DrType, наверное я где-то что-то не то сделал, не работает почему-то. Может подскажите?

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
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тест</title>
  <link rel="stylesheet" type="text/css" href=style.css>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
 </head>
 <body>
    <header> 
 <div class="logo">
    <a href="index.html"><img class="graficlogo" src="logo.png" alt="logo"></a>
 </div>
 <nav>
    <div class="topnav" id="myTopnav">
        <a href="index.html">home</a>
        <a href="project.html">projects</a>
        <a href="blog.html">blog</a>
        <a href="contacts.html">contacts</a>
        <a href="about.html">about</a>
        <a href="services.html">services</a>
        <a href="location.html">location</a>
        <a id="menu" href="#" class="icon">☰</a>
    </div>
</nav>
        </header>
 <main>
    <div class="blog-container">
        <div class="blog-header">
            <div class="blog-cover">
            
            </div>
        </div>
        <div class= "blog-body">
            <div class= "blog-title">
                <h1><a href="#">Lorem ipsum dolor sit</a></h1>
            </div>
             <div class="blog-text">
                <p>Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Iusto vel mollitia id reprehenderit eveniet fugiat nihil consectetur. Repudiandae nam eveniet deserunt sit culpa ipsa aliquam, at nobis. Velit dignissimos, sit eius debitis repellat, itaque sint vel ullam veniam officiis quis?</p>
                </div>
             <ul>
                <li class="published-date">15.06.2020</li>
             </ul>
 
            </div>
            </div>
 </main>
<footer>
    <nav>
        <a href="index.html">home</a>
        <a href="project.html">projects</a>
        <a href="blog.html">blog</a>
        <a href="contacts.html">contacts</a>
        <a href="about.html">about</a>
        <a href="services.html">services</a>
        <a href="location.html">location</a>
</nav>
 
    
</footer>
 </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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
*{
    margin: 0;/* внешний отсутступ */
    padding: 0;/* внут отсутступ */
}
a{
 
    text-decoration: none;
}
li{
    text-decoration: none;
    list-style: none;
}
body{
  font-family: 'Raleway', sans-serif;
}
.logo{
    background:#000;
    width: 100%;
    display: flex;
    justify-content: center; /*центрорование черех флексбоксы*/
 
}
.graficlogo{ /*адаптивность*/
    padding: 5px;
    width: 100%;
    box-sizing: border-box;  /* такое свойство изменяет алгоритм расчёта ширины и высоты элемента полей и границ */
 
}
nav{
    text-align: center;
    margin: auto;
    width: 800px;
    height: 100px;
}
.topnav{
background-color: #fff;
font-size: 14px;
margin-top: 40px;
}
.topnav a{
    color:#000;
    text-align: center;
    padding: 14px 16px;
    font-size: 15px;
}
.topnav a:hover{/*подчёркивание при наведении*/
    border-bottom: 2px solid #000;
}
.topnav .icon{
display: none; /* по дефолту скрыть иконку три полоски*/
}
 
.blog-container{
    background:#fafafa;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.2) 0 4px 2px -2px;
    font-weight: 100;
    margin: 48px auto;
    width: 50rem;
}
.blog-container a:hover{
    border-color: #ff4d4d;
    color:#ff4d4d;
}
.blog-cover{
    background:url(pr.png);
    background-size: cover;
    border-radius: 5px 5px 0 0;
    height: 15rem;
    box-shadow: rgba(0,0,0,0.2) 0 64px 64px 16px;
}
.blog-body{
    color: #333;
    font-weight: 100;
}
.blog-title h1 a{
    color:#333;
    font-weight: 100;
}
.blog-text ul{
    color: #4d4d4d;
} 
footer{
    width: 100%;
    height: auto;
    background: #000;
    margin: 0 auto;
    text-align: center;
    padding-top: 25px;
}
footer a{
    color: white;
    font-size: 14px;
    margin-left: 10px;
 
}
footer nav a:hover{
    border-bottom: 1px solid white;
}
 
@media screen and (max-width: 768px){
        .topnav a:not(:first-child) { /*класс топнав далее ссылка далее исключение first-child* для того чтобы была видими Home с кнопкой сворачивания */
          display: none;
        }
        .topnav a.icon{
            float: right;
            margin-top: -17px;
            display: block;
            color: black; 
        }
        nav{
            width: 100px;
            height: 100px;
        }
        .topnav.responsive{
            position: relative;
        }
        .topnav.responsive a.icon{
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive a{
            float: none;
            display: block;
            text-align: left;
        }
        .blog-container{
            width: 28rem;
        }
}
@media screen and (max-width: 420px){
    .blog-container{
            width: 20rem;
        }
}

JavaScript
1
2
3
4
menu.onclick = function myFynction() {
  var x = document.getElementById("myTopnav");
  x.classList.toggle("responsive");
};

@DrType · 17.12.2020, 19:18

У меня Ваш код работает — кликаю по <a id="menu" href="#" class="icon">☰</a>, и меню скрывается и раскрывается...

@CoderReact · 17.12.2020, 19:27 **[ТС]**

DrType, странно.

@DrType · 17.12.2020, 19:30

вот.

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	17.12.2020, 19:18
	У меня Ваш код работает — кликаю по `<a id="menu" href="#" class="icon">☰</a>`, и меню скрывается и раскрывается... 0

@CoderReact 0 / 0 / 0 Регистрация: 09.12.2020 Сообщений: 13
	17.12.2020, 19:27 [ТС]
	DrType, странно. 0

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	17.12.2020, 19:30
	вот. 0

Не работает кнопка развёртки меню

Решение