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

@Pererez123 · Регистрация: 26.09.2016

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

никак не могу сделать чтобы меню встало в столбик, а не в линию

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
<div class="menu">
    <div class="menu__icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
        <ul class="nav_list">
                <li>
                    <a class="menu__links-item" href="#">Главная</a> 
                </li>
                <li>
                    <a class="menu__links-item" href="#">О нас</a> 
                </li>
                <li>
                    <a class="menu__links-item" href="#">Каталог</a> 
                </li>
                <li>
                    <a class="menu__links-item" href="#">Доставка и оплата</a> 
                </li>
                <li>
                    <a class="menu__links-item" href="#">Контакты</a>
                </li>
            </ul>
</div>

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
*{
    margin: 0;
    padding: 0;
}
.menu{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    text-align: right;
}
 
.nav_list li{
    display: inline-block;
    vertical-align: top;
 
    position: relative;
    padding: 20px 40px 20px 0px;
    
}
 
.menu__links-item{
    font-family: tatianactt, arial;
    font-size: 24px;
    color: white;
    text-decoration: none;
 
}
 
.menu__links-item:hover{
    display: inline-block;     
    position: relative;         
    padding: 5px 8px 5px 8px;     
    margin: -5px -8px -5px -8px;
    color: #473254;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
}
 
.menu__icon {
   display: none;
   width: 40px;
   height: 50px;
   position: relative;
   cursor: pointer;
}
 
.menu__icon span {
  display: block;
  position: absolute;
  height: 5px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.3s ;
}
 
.menu__icon span:nth-child(1) {
  top: 5px;
  
}
 
.menu__icon span:nth-child(2), .menu__icon span:nth-child(3) {
  top: 18px;
  
}
 
.menu__icon span:nth-child(4) {
  top: 31px;
  
 }
 
 .menu.menu_state_open .menu__icon span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
 
.menu.menu_state_open .menu__icon span:nth-child(2) {
  transform: rotate(45deg);
}
 
.menu.menu_state_open  .menu__icon span:nth-child(3) {
  transform: rotate(-45deg);
}
 
.menu.menu_state_open  .menu__icon span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
 
.menu.menu_state_open .nav_list {
  display: block;  
}
 
@media screen and (max-width: 1024px) {
  .menu__icon{
    display: inline-block;
  }
  
  .nav_list {
    position: fixed;
    display: none;
    top: 0;
    right: 0;
    left: 0;
    margin-top: 54px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow: auto;
  }
  
  .nav_list a {
    display: block;
    text-align: center;
    color: #ffffff;
  }
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function($){
  $(function() {
    $('.menu__icon').on('click', function() {
      $(this).closest('.menu')
        .toggleClass('menu_state_open');
    });
    
    $('.menu__links-item').on('click', function() {
      // do something
 
      $(this).closest('.menu')
        .removeClass('menu_state_open');
    });
  });
})(jQuery);

@Fedor92 · 26.08.2018, 22:11

CSS
1
2
3
.nav_list li{
        display:block;
}

Новые блоги и статьи Все статьи Все блоги /
Инструменты 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, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .