Всплывающее окно

@Jekyll-Hyde · Регистрация: 19.01.2018

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

Добрый день.
Проблема такая:

Решил сделать маленький бложек практики ради...
Надо было реализовать выпадающее меню, которое появлялось бы при клике по кнопке-бутерброд.
Все вроде сделал, менюшка даже появляется.... но буквально на долю секунды. Не могу понять, с чем это связано. Возможно, конфликт с CSS кодом где-то, а может и нет. Есть идеи?

HTML5
1
<a class="gmbB"  href="" onclick="showNavSmall();">& #9776;</a>

CSS
1
2
3
.gmbB{
    display:none;
}

JavaScript
1
2
3
4
function showNavSmall(){
    var elem = document.getElementById("gmbB");
    elem.style.cssText="display: block;";
}

@Antiplayer · 19.03.2019, 23:38

Сообщение от Jekyll-Hyde

var elem = document.getElementById("gmbB");

У вас селектор в css по классу прописан, а ищете по id:

HTML5
1
2
3
.gmbB{
    display:none;
}

Элемент вообще не имеет id:

Сообщение от Jekyll-Hyde

HTML5
1
<a class="gmbB" *href="" onclick="showNavSmall();">& #9776;</a>

Ну и вообще, если уже подключаете стили, так и пользуйтесь ими.

HTML5
1
2
3
4
5
6
7
.gmbB.show{
    display:block;
}
 
.gmbB {
    display:none;
}

А скриптом меняйте класс:

JavaScript
1
2
3
4
function toggleNavSmall(){
    var elem = document.getElementById("gmbB");
    elem.classList.toggle("show");
}

Это быстрее.

@amr-now · 20.03.2019, 10:47

Добрый день.

Смешались в кучу кони, люди. Теперь надо отделить мух от котлет.
index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet">
    <link>
</head>
<body>
    <div class="dropdown">
        <div class="gmbB">☰</div>
        <div class="gmbBMenu">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

styles.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
/* The container <div> - needed to position the dropdown content */
 
.dropdown {
    position: relative;
    display: inline-block;
}
 
.gmbB {
    background-color: #3498DB;
    color: white;
    padding: 4px 10px 4px 10px;
    font-size: 24px;
    display: inline-block;
    border: none;
    cursor: pointer;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
/* Dropdown button on hover & focus */
 
.gmbB:hover, .gmbB:focus {
    background-color: rgb(10, 12, 14);
}
 
/* Dropdown Content (Hidden by Default) */
 
.gmbBMenu {
    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;
}
 
/* Links inside the dropdown */
 
.gmbBMenu a {
    color: #505050;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
 
/* Change color of dropdown links on hover */
 
.gmbBMenu a:hover {
    background-color: #dddddd;
    color: black;
}
 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
 
.gmbBMenu.show {
    display: block;
}

index.js

JavaScript
1
2
3
4
5
6
document.querySelector(".gmbB").onclick = showNavSmall;
let menu = document.querySelector(".gmbBMenu");
 
function showNavSmall(){
    menu.classList.toggle("show");
}

Добавлено через 1 минуту
----
Стили честно в большинстве скопипастены с https://html5css.ru/howto/howto_js_dropdown.php

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом