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 that you have read and understand our privacy policy and code of conduct.

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