С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Ofelion
13 / 13 / 15
Регистрация: 26.01.2015
Сообщений: 203
1

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

19.11.2017, 11:52. Просмотров 179. Ответов 2
Метки нет (Все метки)

Доброго времени суток!
Когда включен режим адаптивного браузера (Chrome, Firefox,), меню-гамбургер не отображается, но при уменьшении размера браузера появляется меню-гамбургер. Когда я помещаю сайт на сервер и открываю его на своем мобильном телефоне, меню-гамбургера нет. Почему?

PS> Сайт одностраничный, я использую табы в меню.

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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
  <div class="container">
 
    <div id="page-wrapper">
      <div id="title"></div>
    </div>
 
    <div id="btn">
      <div id='top'></div>
      <div id='middle'></div>
      <div id='bottom'></div>
    </div>
 
    <div id="box">
      <div class="tabs-menu menu menu--ama" id="items">
        <a class="current menu__item" href="#tab-1">
          <span class="menu__item-name item">Наши услуги</span>
        </a>
        <a class="menu__item" href="#tab-2">
          <span class="menu__item-name item">Наши клиенты</span>
        </a>
        <a class="menu__item" href="#tab-3">
          <span class="menu__item-name item">Контакты</span>
        </a>
      </div>
    </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
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
#tabs-container {
  width: 100%;
  /*background-image: url('img/escheresque_ste.png');*/
  background-image: linear-gradient(to right, rgba(0, 0, 255, 0.45), rgba(0, 0, 255, 0.45)), url('img/bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 1000px;
}
 
.container {
  width: 80%;
  margin: 0 auto;
}
 
.tabs-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: -1px;
  padding-top: 15px;
}
 
.tabs-menu li {
  height: 30px;
  line-height: 30px;
  float: left;
  margin-right: 10px;
  background-color: #ccc;
  border-top: 1px solid #d4d4d1;
  border-right: 1px solid #d4d4d1;
  border-left: 1px solid #d4d4d1;
  list-style-type: none;
}
 
.tabs-menu li.current {
  position: relative;
  background-color: tra;
  border-bottom: 1px solid #fff;
  z-index: 5;
}
 
.tabs-menu li a {
  padding: 10px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
 
.tabs-menu .current a {
  color: #2e7da3;
}
 
.tab {
  width: 100%;
}
 
.tab-content {
  width: 100%;
  text-align: center;
  justify-content: center;
  display: none;
}
 
.listServices__item {
  font-family: 'Montserrat', sans-serif;
  color: white;
  list-style-type: none;
  display: flex;
  flex-direction: column;
}
 
#tab-1 {
  display: block;
}
 
@media (max-width: 714px) {
  #page-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #title {
    color: #f6f6f6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
  }
  #btn {
    position: fixed;
    z-index: 5;
    top: 68px;
    right: 15px;
    cursor: pointer;
    transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  }
  #btn div {
    width: 35px;
    height: 2px;
    margin-bottom: 8px;
    background-color: #232323;
    transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, background-color 250ms;
  }
  #btn.active div {
    background-color: #343838;
  }
  #btn.active #top {
    transform: translateY(10px) rotate(-135deg);
  }
  #btn.active #middle {
    opacity: 0;
    transform: rotate(135deg);
  }
  #btn.active #bottom {
    transform: translateY(-10px) rotate(-45deg);
  }
  #box {
    position: fixed;
    z-index: 4;
    overflow: auto;
    top: 0px;
    right: -275px;
    width: 275px;
    opacity: 0;
    padding: 20px 0px;
    height: 75%;
    background-color: #f6f6f6;
    color: #343838;
    transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  }
  #box.active {
    right: 0px;
    opacity: 1;
  }
  #items {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 75%;
  }
  #items .item {
    position: relative;
    cursor: pointer;
    padding: 15px 30px;
    transition: all 250ms;
  }
  .menu__links__item:hover {
    background: none;
  }
  #items .item:hover {
    padding: 15px 45px;
    background-color: rgba(52, 56, 56, 0.2);
  }
  .menu__links__item {
    line-height: 20px;
    vertical-align: center;
  }
  #btn,
  #btn * {
    will-change: transform;
  }
  #box {
    will-change: transform, opacity;
  }
}



Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if($(window).innerWidth() <= 714) {
  const sidebarBox = document.querySelector('#box'),
    sidebarBtn = d ocument.querySelector('#btn'),
    pageWrapper = d ocument.querySelector('#page-wrapper');
  sidebarBtn.addEventListener('click', event => {
    sidebarBtn.classList.toggle('active');
    sidebarBox.classList.toggle('active');
  });
  pageWrapper.addEventListener('click', event => {
    if (sidebarBox.classList.contains('active')) {
      sidebarBtn.classList.remove('active');
      sidebarBox.classList.remove('active');
    }
  });
  window.addEventListener('keydown', event => {
    if (sidebarBox.classList.contains('active') && event.keyCode === 27) {
      sidebarBtn.classList.remove('active');
      sidebarBox.classList.remove('active');
    }
  });
};
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.11.2017, 11:52
Ответы с готовыми решениями:

Не появляется меню гамбургер
Здравствуйте! Не появляется меню Гамбургер при уменьшении размеров браузера. В...

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

Как сделать гамбургер-меню в Bootstrap3?
Друзья, здравствуйте! Подскажите, пожалуйста, как сделать в Bootstrap3...

Позиционирование гамбургер меню в браузере Chrome и FireFox
Всем добрый вечер и вот проблема. С таким я еще не сталкивался. В разных...

Вёрстка адаптивного меню-гамбургер без использования фреймворков
Всем привет! Необходимо сверстать адаптивное гамбургер-меню без использования...

2
AlexZaw
600 / 588 / 273
Регистрация: 07.08.2016
Сообщений: 1,911
Завершенные тесты: 2
19.11.2017, 12:33 2
возможно это поможет:
HTML5
1
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1
Ofelion
13 / 13 / 15
Регистрация: 26.01.2015
Сообщений: 203
19.11.2017, 12:47  [ТС] 3
AlexZaw, Спасибо! Помогло!
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.11.2017, 12:47

Пропадает меню и тут же появляется
вот источник проблем - http://airkuban.ru/ между баннерами и горячими...

В браузере SAFARI не появляется выпадающее меню
Сегодня заметил что выпадающее меню не хочет появляться в SAFARI браузере. Во...

Появляется отступ в меню, не могу убрать
&lt;div id=&quot;menu&quot;&gt; &lt;ul&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru