Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
Другие темы раздела
HTML, CSS Раскрывающееся меню при наведении http://www.cyberforum.ru/html/thread2284072.html
Здравствуйте, у нас такая проблема, поставили в блок header.php виджет меню, которое должно раскрываться при наведении, проблема в том, что меню раскрывается даже когда курсор наводится на область...
HTML, CSS Список панелей на нескольких вкладках (страницах) Доброго дня. Суть такая - имеется набор блоков-панелей div фиксированного размера, произвольного количества. Располагаются они в три колонки, и когда занимают три ряда, то оставшиеся панели... http://www.cyberforum.ru/html/thread2283991.html
Исчезновение кнопки по нажатию HTML, CSS
Здравствуйте, подскажите пожалуйста как сделать что бы кнопка исчезла после того как я на неё нажму.
Google Chrome: Фон наполовину отображает картинку HTML, CSS
Есть код, в Гугл хроме отображается только часть картинки, в Фаирфоксе все нормально. Как исправить? Изображение 500х200. Сайт на Бутстрапе. Как в Хроме растянуть всю картинку? <div...
HTML, CSS Работа с CSS из JS http://www.cyberforum.ru/html/thread2283837.html
Есть анимированная менюшка на чистом CSS которая разворачивается при наведении мыши последняя функция реализуется вот этими свойствами span:hover + .wrap, .wrap:hover{ ...
HTML, CSS Медиазапросы Коллеги, прошу о помощи неравнодушных. Сайт pe.mini-mall.ru Взял за образец чужой код, а настроить до конца не получается. 1. При адаптации меню, не могу понять, как растянуть блоки на всю... подробнее
Freeze_Breeze
217 / 227 / 88
Регистрация: 12.01.2016
Сообщений: 1,354
13.08.2018, 22:53 0

Не появляется меню бургер(

13.08.2018, 22:53. Просмотров 856. Ответов 2
Метки (Все метки)

Лучший ответ Сообщение было отмечено Koblan как решение

Решение

Koblan,
Когда меню спрятано display:none;, когда меню нужно показать display: block; (это делается через медиазапросы).
Сохраните где нибудь себе и пользуйтесь им. Так как это рабочий вариант и не придется выдумывать велосипед (если вдруг что), советую на Code Pen сохранить и когда нужно юзать. В самом низу приложу SASS код, если вдруг что.
HTML5
1
<a href="#" class="toggle-mnu hidden-lg"><span></span></a>
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
body {
  background-color: #333;
}
 
.toggle-mnu {
  display: block;
  width: 28px;
  height: 28px;
  margin-top: 14px;
}
.toggle-mnu span:after, .toggle-mnu span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
}
.toggle-mnu span:after {
  top: 18px;
}
.toggle-mnu span {
  position: relative;
  display: block;
}
.toggle-mnu span, .toggle-mnu span:after, .toggle-mnu span:before {
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 2px;
}
.toggle-mnu.on span {
  background-color: transparent;
}
.toggle-mnu.on span:before {
  transform: rotate(45deg) translate(-1px, 0px);
}
.toggle-mnu.on span:after {
  transform: rotate(-45deg) translate(6px, -7px);
}
Javascript
1
2
3
4
5
$(".toggle-mnu").click(function() {
  $(this).toggleClass("on");
  $(".main-mnu").slideToggle();
  return false;
});
SASS
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
body
  background-color: #333
 
.toggle-mnu 
  display: block
  width: 28px
  height: 28px
  margin-top: 14px
 
  span:after, span:before 
    content: ""
    position: absolute
    left: 0
    top: 9px
 
  span:after
    top: 18px
 
  span 
    position: relative
    display: block
 
  span, span:after, span:before
    width: 100%
    height: 2px
    background-color: #fff
    transition: all 0.3s
    backface-visibility: hidden
    border-radius: 2px
 
 
  &.on span 
    background-color: transparent
 
  &.on span:before 
    transform: rotate(45deg) translate(-1px, 0px)
 
  &.on span:after 
    transform: rotate(-45deg) translate(6px, -7px)


Вернуться к обсуждению:
Не появляется меню бургер(
1
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.08.2018, 22:53
Готовые ответы и решения:

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

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

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

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

Не появляется меню-гамбургер в адаптивном режиме
Доброго времени суток! Когда включен режим адаптивного браузера (Chrome,...

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