Как сделать “гамбургер-меню”

495

13 января 2017, 07:37

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

Помогите советом как сделать эту конструкцию рабочей на мобильных устройствах? Чтобы при @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>

Answer 1

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

Answer 2

И лучше вынести .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>