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

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

On 7/28/2017 at 2:18 PM, Svetlana_P said:

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

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

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

Expand

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

AlexZaw · July 28, 2017

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

rinatoff · July 28, 2017

On 7/28/2017 at 2:30 PM, AlexZaw said:

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

Expand

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

AlexZaw · July 28, 2017

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

rinatoff · July 28, 2017

On 7/28/2017 at 2:38 PM, AlexZaw said:

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

Expand

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

Svetlana_P · July 28, 2017

On 7/28/2017 at 2:27 PM, rinatoff said:

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

Expand

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

andrey7287 · July 28, 2017

On 7/28/2017 at 2:38 PM, AlexZaw said:

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

Expand

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