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

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. Ну серьезно, мне (и я думаю не только) лень даже вникать в эти портянки, а так зашел поклацал и дал ответ.

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

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

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

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

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

CSS

Простой
Как добраться до placeholder и выровнять по вертикали при наличии #shadow-root (user-agent)?
- 1 подписчик
- 6 часов назад
- 15 просмотров
0

ответов
HTML

+1 ещё

Простой
Как очистить HTML от всех аттрибутов?
- 2 подписчика
- 15 часов назад
- 171 просмотр
2

ответа
HTML

Простой
Как закрепить div с iframe?
- 1 подписчик
- вчера
- 60 просмотров
0

ответов
HTML

+1 ещё

Простой
Как сделать отоброжение других html страниц на одной без перехода?
- 1 подписчик
- вчера
- 105 просмотров
2

ответа
HTML

+2 ещё

Простой
Какие познания в HTML нужны копирайтеру? Нужно ли В ДОБАВОК знать CSS?
- 1 подписчик
- вчера
- 104 просмотра
2

ответа
HTML

+1 ещё

Простой
Как в HTML задать расположение строке и изображению?
- 1 подписчик
- вчера
- 60 просмотров
0

ответов
HTML

+2 ещё

Простой
Captive Portal | Html+CSS+bash | OpenWrt?
- 3 подписчика
- 03 янв.
- 535 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему onClick срабатывает два раза?
- 1 подписчик
- 01 янв.
- 248 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как запустить языковую модель на JavaScript?
- 2 подписчика
- 01 янв.
- 2355 просмотров
1

ответ
HTML

+1 ещё

Простой
Как исправить клавиатуру закрывающую поле ввода vue.js?
- 2 подписчика
- 31 дек. 2024
- 356 просмотров
0

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

Fullstack-разработчик PHP/JavaScript

LegalIndonesia

от 3 000 до 3 000 $

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Необходим парсер

05 янв. 2025, в 07:48

2000 руб./за проект

Нарисовать макет сайта

05 янв. 2025, в 06:24

15000 руб./за проект

Разработать бекенд

05 янв. 2025, в 06:22

15000 руб./за проект

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

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

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

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

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

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