Не могу реализовать данное меню

rinatoff · July 28, 2017

Друзья встал такой вопрос с реализацией 2ух меню, между которыми находится лого. Менюшки то расходятся, то лого куда то съезжает. Кто может подсказать путь решения данной проблемы?

Вот что необходимо получить:

Ширина 1410px.

Прилагаю свои способы:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<header>
		<div class="container">
			<nav> 
				<ul class="menu menu_left">
					<li>
						<a href="#">Павильон №1</a>
					</li>
					<li>
						<a href="#">Павильон №2</a>
					</li>
					<li>
						<a href="#">Расположение залов</a>
					</li>
				</ul>
				<ul class="menu menu_right">
					<li>
						<a href="#">Фотогаллерея</a>
					</li>
					<li>
						<a href="#">Контакты</a>
					</li>
					<li>
						<a href="#">Карта проезда</a>
					</li>
				</ul>
			</nav>
		</div>
	</header>
	<section>
		<div class="container">ewfwefew</div>
	</section>
	<section>
		<div class="container">wefwefwef</div>
	</section>
	<section>
		<div class="container">ewfwef</div>
	</section>
	<section>
		<div class="container">wefwe</div>
	</section>
	<section>
		<div class="container">14dwd</div>
	</section>
	<section>
		<div class="container">wqdwq</div>
	</section>
	<footer>
		<div class="container">wqdqw</div>
	</footer>
</body>
</html>

CSS:

body {
	font-family: Arial, sans-serif;
	padding: 0;
	margin: 0;
}

div {
	box-sizing: border-box;
}

header {
	background: url(../img/sky.jpg) no-repeat center top / cover;
	height: 600px;
}

.container {
	width: 100%;
	max-width: 1410px;
	margin: 0 auto;
}

nav {
	padding: 115px 80px 0px 80px;

}

/*.logo {
	padding-top: 115px;
} */

.menu {
	padding: 0;
	margin: 0;
	display: block;
	background: #D32D43;
	width: 548px;
}

.menu_left {
	float: left;
}

.menu_right {
	float: right;
}

.menu li {
	display: block;
	float: left;
	padding: 40px 17px 40px 17px;
}

.menu li a {
	color: #FEF5F6;
	text-decoration: none;
	text-transform: uppercase;
}

.menu li a:hover {
	padding: 5px;
	color: #D32D43;
	background: #FEF5F6;
	border-radius: 10px; 
}

Svetlana_P · July 28, 2017

Вариант реализации — через флексбоксы

Через свойство order можно передвинуть логотип наверх, когда меню становится вертикальным на мобильных устройствах.

А свой код можете показать, пожалуйста, в песочнице. Или скинуть ссылку на архив с ней.

rinatoff · July 28, 2017

8 минут назад, Svetlana_P сказал:

Вариант реализации — через флексбоксы

Через свойство order можно передвинуть логотип наверх, когда меню становится вертикальным на мобильных устройствах.

А свой код можете показать, пожалуйста, в песочнице. Или скинуть ссылку на архив с ней.

Спасибо за ответ, а кроме флексбокса можно как-то реализовать? не знаю данную технологию(

AlexZaw · July 28, 2017

можно положить лого между списками и спозиционировать абсолютно относительно nav

rinatoff · July 28, 2017

4 минуты назад, AlexZaw сказал:

можно положить лого между списками и спозиционировать абсолютно относительно nav

Благодарю, сейчас попробую. Т.е лого должно лежать в nav?

AlexZaw · July 28, 2017

да, лого в nav, nav задаем position: relative, а лого position:absolute; top:50%; left:50%; и отрицательный левый маржин на половину ширины лого

rinatoff · July 28, 2017

2 минуты назад, AlexZaw сказал:

да, лого в nav, nav задаем position: relative, а лого position:absolute; top:50%; left:50%; и отрицательный левый маржин на половину ширины лого

спасибо большое, сейчас попробую.

Svetlana_P · July 28, 2017

9 минут назад, rinatoff сказал:

Спасибо за ответ, а кроме флексбокса можно как-то реализовать? не знаю данную технологию(

Чтобы при этом было адаптивно — не знаю, как еще Вот как раз повод изучить флексбоксы. Они очень удобны и легки в освоении

andrey7287 · July 28, 2017

3 часа назад, AlexZaw сказал:

отрицательный левый маржин на половину ширины лого

transform: translateX(-50%)

Sign In

Не могу реализовать данное меню

Question

rinatoff

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Svetlana_P

Link to comment

Share on other sites

rinatoff

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

rinatoff

Link to comment

Share on other sites

AlexZaw

Link to comment

Share on other sites

rinatoff

Link to comment

Share on other sites

Svetlana_P

Link to comment

Share on other sites

andrey7287

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information