Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
Koblan
0 / 0 / 1
Регистрация: 13.01.2018
Сообщений: 62
#1

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

13.08.2018, 18:24. Просмотров 807. Ответов 2

Не появляется меню бургер(
Поставил на ряду что-бы посмотреть как выглядеть,анимацию не делал,тупо не показывается
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
<header>
                <div class="container">
                    <div class="header">
                        <div class="logoandnav">
                            <div class="logo">
                                <img src="img/logo.png" alt="logo">
                            </div>
                            <nav class="nav">
                                <ul>
                                    <li><a href="#">home</a></li>
                                    <li><a href="#">about company</a></li>
                                    <li><a href="#">permit and permanent residence in Bulgaria</a></li>
                                    <li><a href="#">real estate and moving</a></li>
                                    <li><a href="#">contacts</a></li>
 
                                </ul>
                                <a href="#" class="hamburger_menu-btn">
                                <span class="bar"></span>
                                <span class="bar"></span>
                                <span class="bar"></span>
                            </a>
                            </nav>
                        </div>
                        <address class="contact">
                            <div class="contact__logo">
                                <i class="fas fa-phone fa-flip-horizontal"></i>
                            </div>
                            <address class="contact__number">
                                <address>+7 (495) 12-321-345</address>
                                <address>+7 (495) 12-321-345</address>
                            </address>
                        </address>
                    </div>
                </div>
            </header>
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
header{
  background:rgba(0,0,0,0.251);
}
.header{
  display:flex;
  color: #fff;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.logo{
  margin-right: 30px;
}
.logoandnav{
  display: flex;
  align-items: center;
}
.nav ul{
  display: flex;
  list-style: none;
}
.nav li a{
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 900;
  font-size:0.7333rem;
  line-height: 17px;
  letter-spacing: 0.007rem;
  margin-right: 24px;
  transition: .3s ease;
}
.contact{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.contact__number{
  flex-direction: column;
  display: flex;
  font-size: 1.067rem;
  line-height: 21px;
  letter-spacing:0.001rem;
  font-weight: 900;
}
.contact__logo{
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  display: flex;
  border: 1px dashed #23a8e0;
  border-radius: 50%;
  margin-right: 11px;
}
.fa-phone {
  font-size:0.867rem;
  color:#23aae2;
}
.nav li a:hover{
  background: #37647b;
  border-radius: 2.8px;
  padding: 13px 14px 10px 14px;
}
.bar {
    width: 35px;
    height: 5px;
    background-color: black;
    margin: 6px 0;
}
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.08.2018, 18:24
Ответы с готовыми решениями:

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

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

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

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

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

2
Freeze_Breeze
191 / 225 / 87
Регистрация: 12.01.2016
Сообщений: 1,350
13.08.2018, 22:53 #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
Koblan
0 / 0 / 1
Регистрация: 13.01.2018
Сообщений: 62
14.08.2018, 00:38  [ТС] #3
Freeze_Breeze,Огромное спасибо!
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.08.2018, 00:38

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

Из-за размеров экрана появляется либо отсутствует пустота в меню
_http://karelin.tk наворотил на широком мониторе ноута 17.3 все ништяк. начал...

Выпадающее меню ненадолго появляется при нажатии на любую ссылку
Само выпадающее меню работает. Проблема в том что когда я нажимаю на другие...


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

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

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