0

Доброго времени суток! Пытаюсь научиться делать гамбургер-меню, да не получается.

Помогите советом как сделать эту конструкцию рабочей на мобильных устройствах? Чтобы при @media 600px меню и ссылки на сети скрывались под кнопкой и становились рядом с логотипом. Заранее спасибо!

.menu {
	width: 90%;
	height: 100px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 5%;
	padding-right: 5%;
}

.menu__category li {
	display: inline;
	padding: 20px;
}

.menu__category a {
	padding-bottom: 36px;
	transition: all 0.2s ease;
	color: black;
}

.menu__category a:hover {
	border-bottom: 6px solid #ec4e4e;
	color: #ec4e4e;
}

.menu__social i {
	padding: 10px;
	transition: color 0.2s ease;
	font-size: 18px;
}

.menu__social i:hover {
	color: #ec4e4e;
}
<div class="menu">
	<div class="menu__logo">
		<img src="img/logo.png" alt="logo">
	</div>
	<div class="menu__category">
		<ul>
			<li>
				<a href="#">Home</a> 
			</li>
			<li>
				<a href="#">Link</a>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
			<li>
				<a href="#">Link</a>
			</li>
		</ul>
	</div>
	<div class="menu__social">
		<i class="fa fa-vk" aria-hidden="true"></i>
		<i class="fa fa-facebook" aria-hidden="true"></i>
		<i class="fa fa-twitter" aria-hidden="true"></i>
	</div>
</div>

2 ответа 2

7

1) Добавить после menu__logo

<a href="#" class="mobile_menu_click">Бургер</a>

2) Подключить jquery

 <script src="http://code.jquery.com/jquery-latest.min.js"></script>

3) В CSS добавить:

    .mobile_menu_click{
        display: none;
    }
    @media screen and (max-width: 600px){
    .menu__category{
            display: none;
    }
    .mobile_menu_click{
        display: block;
    }
    .menu__category li {
        display: block;
    }
}

4) Добавить короткий JS код:

  <script>
    $('.mobile_menu_click').click(function(){
       $('.menu__category').fadeToggle();
    });
  </script>

Что до самой иконки "гамбургера", то в сети полно готовых решений. Все остальное - это дело css

1

И лучше вынести .menu__logo за пределы .menu (поставить перед)

<div class="menu__logo">
   <img src="img/logo.png" alt="logo">
</div>

<a href="#" class="mobile_menu_click">Бургер</a>

 <div class="menu">
    <div class="menu__category">
        <ul>
            <li>
                <a href="#">Home</a> 
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
            <li>
                <a href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="menu__social">
        <i class="fa fa-vk" aria-hidden="true"></i>
        <i class="fa fa-facebook" aria-hidden="true"></i>
        <i class="fa fa-twitter" aria-hidden="true"></i>
    </div>
  </div>

Так проще элементы стилизовать будет.

1
  • В примере используется БЭМ, если вынести .menu__logo за пределы .menu, то структура будет нарушена. 12 янв 2017 в 8:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.