На кожному сайті є навігація — меню сторінок. І якщо на десктопах зазвичай це виглядає так, як і було задумано, то на мобільних девайсах завжди треба придумати щось особисто. Варіантів — купа, але я покажу найпростіший, так зване гамбургер-меню, а ви вже зможете його модифікувати для своїх потреб.

Вам необов’язково розуміти те, що я писатиму нижче, але майте на увазі, що я використовуватиму HTML (для розмітки навігації), CSS (для стилізації) і jQuery (для функціювання гамбургеру).

Почнемо із структури, використаємо звичайний ненумерований список:

<div class="nav-block">
<nav>
<ul>
<li><a href="#">Головна</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Портфоліо</a></li>
<li><a href="#">Відгуки</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</nav>
</div>

Наступним кроком буде його стилізація. Я не придумуватиму чогось надзвичайного, це звичайний приклад.

.nav-block {
background: #eee;
}
.nav-block ul {
margin: 0;
padding: 0;
font-size: 0;
border-bottom: 1px solid #ccc;
}
.nav-block ul li {
list-style: none;
display: inline-block;
}
.nav-block ul li a {
display: inline-block;
color: #353535;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
text-decoration: none;
padding: 15px 20px;
border-right: 1px solid #ccc;
transition: .3s;
}
.nav-block ul li a:hover {
background: #ddd;
}

Це стилі виключно для десктопної версії. Я пропущу адаптацію під середні розміри екранів (1200px, 1024px і т.д.), тому що там буде хіба що зменшуватися шрифт та відступи для того, щоби воно вміщалося. Тому тепер переходимо до того, як виглядатиме навігація на телефонах, для цього нам будуть потрібні медіа-запити:

@media (max-width: 991px) {
.nav-block ul {
border-bottom: 0;
}
.nav-block ul li {
display: block;
}
.nav-block ul li a {
display: block;
border-right: none;
border-bottom: 1px solid #ccc;
}
}

Цим кодом ми перевели меню з горизонтального вигляду у вертикальний на екранах, ширина яких менша за 992px. Далі нам потрібен сам гамбургер, по натисканню на який ми будемо показувати та навігацію. Додамо його над блоком з навігацією, у стилях сховаємо його, показуючи тільки за тієї ж умови, що й зміна вигляду навігації, у висновку це виглядатиме так:

<a href="#" id="touch-menu" class="touch-menu">Меню</a>
<div class="nav-block">
<nav>
<ul>
<li><a href="#">Головна</a></li>
<li><a href="#">Блог</a></li>
<li><a href="#">Портфоліо</a></li>
<li><a href="#">Відгуки</a></li>
<li><a href="#">Контакти</a></li>
</ul>
</nav>
</div>

Тепер додамо стилізацію: спочатку сховаємо це покликання, а на телефонах покажемо. Стилізацію будемо проводити по класу, а ідентифікатор залишимо для того, щоб звертатися до елементу з jQuery. Окрім того, сховаємо меню на телефонах, щоб його на початку взагалі не було видно.

.touch-menu {
display: none;
}

@media (max-width: 991px) {
.nav-block {
display: none;
}
.touch-menu {
display: block;
background: #353535;
color: #ffffff;
text-decoration: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
padding: 20px;
}
}

На цьому уся робота з HTML/CSS закінчена. Залишилося всього декілька рядків JS, із використанням бібліотеки jQuery. Ми звернемося до елементу #touch-menu, і по кліку на ньго будемо змінювати видимість блоку з меню. І так як цей елемент є покликанням, ми відмінимо його стандартну дію за допомогою e.preventDefault();:

$(document).ready(function(){
// Мобільна навігація
$('#touch-menu').click(function(e){
e.preventDefault(); // Відміняємо стандартну дію
$('.nav-block').slideToggle(); // застосовуємо анімацію для блоку навігації
});
});

Ось і все, таким чином можна адаптувати будь-яку навігацію. Але у цьому прикладі розглянуте однорівневе меню, без випадаючих списків. У одному із наступних матеріалів я розгляну адаптацію більш складного варіанту, де будуть наявні підменю!

Коментарі