С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Predat
0 / 0 / 2
Регистрация: 16.12.2016
Сообщений: 118
1

Бургер меню - не работает корректно при клике

24.09.2017, 13:18. Просмотров 459. Ответов 2
Метки нет (Все метки)

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

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
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="main/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
    <link rel="stylesheet" href="main/font.css">
    <link rel="stylesheet" href="main/style.css">
</head>
<body>
<header>
    <div class="header_inner">
        <a href="#" class="logo">
            <img src="images/logo.png" alt="logo">
        </a>
        <div class="header_info">
            <div class="header_info_top">
                <p class="header_title">официальный дистрибьютор dyson</p>
                <p class="phone">+7 (495) 739-20-96</p>
            </div>
            <div class="header_info_bottom">
                <nav>
                    <ul>
                        <li><a href="#">Каталог</a></li>
                        <li><a href="#">Технологии</a></li>
                        <li><a href="#">Особенности</a></li>
                        <li><a href="#">Заказать</a></li>
                        <li><a href="#">Пресс-релизы</a></li>
                        <li><a href="#">О компании</a></li>
                        <li><a href="#">Контакты</a></li>
                    </ul>
                </nav>
                <a href="#" class="menu">
                    <div class="burger"></div>
                </a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script >
    var top_show = 106;
    $(document).ready(function() {
        $(window).scroll(function () {
            if ($(this).scrollTop() > top_show){
                $('header').css("position","fixed");
            }
            else{
                $('header').css("position","static");
            }
        });
    });
</script>
<script>
    $( document ).ready(function() {
        $( ".menu" ).click(function() {
            $(".header_info_bottom nav ul").toggle();
        });
    });
</script>
</body>
</html>
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
body, html {
    height: 100%;
}
.clear {
    clear: both;
}
header {
    background-color: #0f0f0f;
    min-height: 106px;
    width: 100%;
}
.header_inner {
    margin: 0 auto;
    max-width: 1030px;
    min-height: 106px;  
}
.logo {
    float: left;
    width: 102px;   
}
.header_info {
    float: left;
    width: 928px;
}
.header_info_top {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}
.header_info_top .header_title {
    text-transform: uppercase;
    font-family: 'Play', sans-serif;
    font-size: 24px;
    color: #909090;
    margin-left: 106px;
}
.header_info_top{
    margin-top: 23px;
}
.header_info_top .phone {
    text-transform: uppercase;
    font-family: 'Play', sans-serif;
    font-size: 24px;
    color: #dcbb34;
}
.header_info_bottom nav {
    height: 31px;
    margin-top: 10px;
}
.header_info_bottom nav ul li {
    display: inline-block;
    margin-right: 20px;
}
.header_info_bottom nav ul li:nth-child(7) {
    margin-right: 0;
}
.header_info_bottom nav ul  {
    float: right;
    height: 31px;
    display: flex;
    align-items: center;
}
.header_info_bottom nav ul li a {
    font-family: 'Play', sans-serif;
    font-size: 16px;
    color: #fff;
    padding: 6px 13.5px;
    border-radius: 16px;
}
.header_info_bottom nav ul li a:hover {
    background-color: #fccf42;
}
.burger {
    height: 2px;
    width: 25px;
    background-color: #fff;
    position: relative;
    border-radius: 3px;
}
.burger:before, .burger:after  {
    content: "";
    display: block;
    position: absolute;
    height: 2px;
    width: 25px;
    background-color: #fff;
    left: 0;
    top: 7px;
    border-radius: 3px;
}
.burger:after {
    top: 14px;
    border-radius: 3px;
}
.menu {
    display: none;
}
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 200px;
    background: rgba(15,15,15, .5);
    z-index: 10;
    display: none;
}
 
 
 
 
@media (max-width: 1040px) {
    .header_title {
        display: none;
    }
    .header_info_top {
        justify-content: flex-end;
        padding-right: 10px;
    }
    .header_info {
        width: 900px;
    }
}
@media (max-width: 1002px) {
    .phone {
        display: none;
    }
    .header_info_top {
        margin-top: 27px;
    }
    .menu {
        display: block;
        float: right;
        margin-right: 20px;
        margin-top: -20px;
        background-size: cover;
        position: relative;
        z-index: 1;
    }
    .header_info_bottom nav ul {
        display: none;
    }
}
Помогите пожалуйста разобраться!!!! За ранее благодарен, тому кто откликнется!!!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.09.2017, 13:18
Ответы с готовыми решениями:

Адаптивное меню не корректно работает
Подключил себе меню jqwery на сайт, добавил много пунктов меню, а превращение...

Открытие меню при клике
Помогите с меню пожалуйста. Нужно, чтобы при клике открывалось submenu, а не...

Не корректно отображается меню в Chrome
Здравствуйте! Подскажите пожалуйста, почему в браузере Chrome последний пункт...

Меню сайта отображается не корректно
Доброго времени суток) Пожалуйста помогите выйти из сложной для меня ситуации!...

Не работает меню навигации при использовании слайдера
Добрый день. Сделал меню навигации все работает, все выпадает: &lt;div...

2
mrtoxas
Модератор
Эксперт HTML/CSS
2622 / 1935 / 1204
Регистрация: 12.07.2015
Сообщений: 5,163
Записей в блоге: 3
24.09.2017, 16:06 2
Так вы сначала сверстайте это меню нормально, а потому уже скриптом показывайте\скрывайте его.
И чего бы элементам не быть в одну строку, если .header_info имеет фиксированную ширину в 900px? Эти элементы там прекрасно помещаются и им незачем переносится на новые строки.
0
Predat
0 / 0 / 2
Регистрация: 16.12.2016
Сообщений: 118
24.09.2017, 17:57  [ТС] 3
да, спасибо!
теперь все ок!)))
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.09.2017, 17:57

Не корректно работает
Не корретно выводит блоки body { padding-top: 0; margin:0; ...

Навбар не работает не корректно
2 проблемы с навбаром на сайте. 1. Делаю прописываю ему параметр position:...

Адаптивный дизайн работает не корректно
Всем привет! Первый раз делаю сайт, возникла проблема с адаптивным дизайном для...


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

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

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