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

Question

Alex Ivanov @Alex_vs_Predator

Начинающий веб-разработчик

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

официальный дистрибьютор dyson
+7 (495) 739-20-96

Вопрос задан более трёх лет назад
323 просмотра

4 комментария

Подписаться 1 Простой 4 комментария

zoozag @zoozag

Отредактируй вопрос

Написано более трёх лет назад

Alex Ivanov @Alex_vs_Predator Автор вопроса

<!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">
                <a href="#" class="menu">
                    <div class="burger"></div>
                </a>
                <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>

            </div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<code lang="javascript">
<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>
</code>
</body>
</html>

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;
	max-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;
	margin-top: 10px;
	margin-bottom: 20px;
}
.header_info_bottom nav ul li:nth-child(7) {
	margin-right: 0;
}
.header_info_bottom nav ul	{
	float: right;
	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;
}


@media (max-width: 1040px) {
	.header_title {
		display: none;
	}
	.header_info_top {
		justify-content: flex-end;
		padding-right: 10px;
	}
	.header_info {
		max-width: 900px;
	}
}
@media (max-width: 1002px) {
	.logo {
		width: 90px;
	}
	.phone {
		display: none;
	}
	.header_info {
		max-width: 230px;
		float: right;
	}
	.header_info_top {
		margin-top: 0;
		padding-top: 60px;
	}
	.menu {
		display: block;
		float: right;
		margin-right: 40px;
		margin-top: -30px;
		background-size: cover;
		position: relative;
		z-index: 1;
	}
	.header_info_bottom nav ul {
		display: none;
		position: relative;
		right: 75px;
	}
	.header_info_bottom nav ul li:first-child {
		margin-top: 50px;
	}
}

Написано более трёх лет назад

Alex Ivanov @Alex_vs_Predator Автор вопроса

вот как происходит когда нажимаю на гамбургер!

мне надо, чтобы при нажатии содержимое меню было на левой стороне, но у меня это не получается сделать!

Написано более трёх лет назад
Rheinmetall @Rheinmetall

Пользуйся любой песочницей, хотя бы codepen. Ну серьезно, мне (и я думаю не только) лень даже вникать в эти портянки, а так зашел поклацал и дал ответ.

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как отображать только один из одинаковых div с id="x" предыдущий развернутый сворачивать?
- 1 подписчик
- 17 минут назад
- 17 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как закрыть модальное окно c переменными кликом по оверлею?
- 1 подписчик
- 47 минут назад
- 20 просмотров
1

ответ
JavaScript

Простой
Как по клику скопировать текст из div (не textarea) в textarea?
- 1 подписчик
- вчера
- 81 просмотр
2

ответа
JavaScript

+1 ещё

Средний
Как выбрать субтитры в Youtube Player API?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
HTML

+2 ещё

Простой
Как с помощью Selenium на Python найти элемент html страницы, который расположен в #shadow-root (open)?
- 1 подписчик
- вчера
- 83 просмотра
2

ответа
HTML

+2 ещё

Средний
Почему данные из представления не передаются в модель в ASP.NET?
- 1 подписчик
- вчера
- 60 просмотров
1

ответ
CSS

Простой
Как получить такую же линию, но на css?
- 1 подписчик
- вчера
- 92 просмотра
1

ответ
JavaScript

+4 ещё

Средний
Как в react-chartjs-2 задать отступ между круговой диаграммой и лейблами?
- 1 подписчик
- вчера
- 42 просмотра
0

ответов
CSS

+1 ещё

Средний
Tabindex и flex order — есть ли решение?
- 1 подписчик
- вчера
- 56 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как определить операционную систему из скрипта вложенного в html документ?
- 1 подписчик
- 02 апр.
- 168 просмотров
3

ответа
Показать ещё Загружается…

JavaScript веб-разработчик (Backend)

TurboProject

от 60 000 ₽

Middle javascript разработчик

Neat-Studio

от 100 000 до 120 000 ₽

Tech Lead/ Team Lead (JavaScript)

SteadyControl • Воронеж

До 200 000 ₽

вот как происходит когда нажимаю на гамбургер!

мне надо, чтобы при нажатии содержимое меню было на левой стороне, но у меня это не получается сделать!
Пользуйся любой песочницей, хотя бы codepen. Ну серьезно, мне (и я думаю не только) лень даже вникать в эти портянки, а так зашел поклацал и дал ответ.

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт