Адаптивне меню з допомогою CSS3 та jQuery

В цьому уроці ми створимо адаптивне меню за допомогою CSS3 і JQuery. Ось як це виглядатиме (перейдіть на Codepen та пограйтеся з шириною сторінки):

{full-post-img}

HTML

Ми обертаємо все в nav елемент з класом nav-bar. Далі створюємо div з класом nav-container в якості нашого другого контейнера. Елементи всередині nav-container: лого з класом nav-logo, кнопка меню ☰ з ідентифікатором nav-menu і класом nav-menu (клас буде прихований і відображатиметься лише на невеликому екрані). Наш список меню також буде включати ul тег з класом nav-list і ідентифікатором nav.

<nav class="nav-bar">
	<div class="nav-container"> 
		<a class="nav-logo" href="#">Logo</a>
		<a class="nav-menu " id="nav-menu">☰ </a>
	<ul class="nav-list " id="nav">
	<li> <a href="#">Item</a></li>
	<li> <a href="#">Item</a></li>
	<li> <a href="#">Item</a></li>
	<li> <a href="#">Item</a></li>
	</ul>
	</div>
</nav>

CSS

Встановимо стилі для посилань і background.

body {
    font-family: 'Open Sans', sans-serif;
    background: #FAFAFA;
}

a {
    text-decoration: none;
}

Тепер додамо деякі настройки ширини для наших класів nav-container і container. Встановимо ширину 95% і максимальну ширину 1000px.

.nav-container,.container {
    width: 95%;
    max-width: 1000px;
    margin: 0 auto;
    background: #9E9E9E;
}

Додамо всі інші стилі: для нашого логотипу, класу nav-bar, для посилань, а також для інших ідентифікаторів і класів.

.nav-bar {
    width: 100%;
    background: #9E9E9E;
}

.nav-container {
    overflow: hidden;
}

.nav-logo {
    float: left;
    display: block;
    padding: 20px 10px;
    color: #757575;
    font-weight: 600;
    font-size: 1.2em;
}

.nav-logo:hover {
    color: #424242;
}

.nav-list {
    float: right;
  list-style:none;
}

.nav-list li {
    float: left;
}

.nav-list li a {
    display: block;
    color: #f9f9f9;
    padding: 20px 10px;
    font-size: 1em;
}

.nav-list li a:hover {
    color: #f9f9f9;
    background: #757575;
}

.nav-menu{
  display: none;
}

Тепер прийшов час зробити наше меню адаптивним. Додаємо наступний код CSS:

@media screen and (max-width: 768px) {
.nav-menu{
	color: #fff;
	float: right;
	display: block;
	padding: 20px 10px;
	cursor: pointer;
}

.nav-list{
float: left; 
width: 100%;
overflow: hidden;
height: 0;

}

.nav-open{ height: auto; }

.nav-list li {
	width: 100%;
}
  
}

Зверніть увагу на те, що на 768px ми ініціюємо клас nav-open. Це встановлюватиме висоту нашому списку меню, коли ми натискатимемо на "бургер". Ми також задаємо нашому nav-list ширину 100%, щоб переконатися, що елементи будуть змінювати стан починаючи з 769px.

jQuery

Тепер, щоб завершити наше адаптивне меню, ми додамо наш jQuery. Цей код буде додавати клас nav-open до меню, щоб встановити йому висоту.

$(document).ready(function(){
	$('#nav-menu').click(function(){
		$('ul.nav-list').addClass('nav-open').slideToggle('300');
	});
});