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

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

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 href="#" class="nav-logo">Logo</a>
        <a id="nav-menu" class="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');
    });
});