Створення бургер-меню для веб сторінки за допомогою CSS

Raisa Kravets -

 Як зробити просте виїжджаюче меню без використання скриптів, тобто на чистому html + CSS?

Для цього можна скористатися CSS flexbox та хаком із чек-боксами. Верхня панель навігації дуже важлива для будь-якого сайту.

1. Створити порожній HTML-документ та назвати його index.html. Додати до нього базовий HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>
Додати шрифт Font Awesome для меню ікон.

Тому потрібно додати наведений далі рядок коду нижче за тегом <title>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
 
<
2. Створіть файл styles.css та підключити  його в HTML-документі:
<link rel="stylesheet" href="styles.css">

3. Додати зображення логотипу 

4. Додати наступний HTML-код у тег 

<body>
<header class="menu"> 
 <div class="menu-wrap"> 
 <img src="logo.png" class="logo-img" alt="Logo"> 
 <nav> 
 <ul> 
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
 </ul> 
 </nav>
 <i class="fa fa-bars menu-icon"></i> 
 </div> 
</header>

Елемент header формує темну навігаційну панель, що містить все інше. Також  є div menu-wrap, який є контейнером для логотипу, навігаційних посилань та іконки меню

5. У файл styles.css додати кілька стилів для всіх елементів:

* { margin: 0;
 padding: 0; 
 box-sizing: border-box; 
 font-family: sans-serif;
}

6. Застосувати стилі до 

header { height: 70px; 
background-color: #22292F; 
padding: 10px 0;
 }

Тепер темна навігаційна панель розтягується на всю ширину вікна перегляду.

7.  Далі  потрібно додати наведені нижче стилі до класу menu-wrap:

.menu-wrap {
 display: flex; 
justify-content: space-between; 
padding: 0 15px; 
}

Щоб усі дочірні елементи займали вільний простір, потрібно використати display:flex, який доступний горизонтально. 

Властивості justify-content встановлено значення space-between, щоб розташувати ці елементи якнайдалі один від одного.

8. Стилізувати кожен із цих дочірніх елементів один за одним.

.logo-img {
 height: 50px; 
} 
.menu-icon { 
font-size: 2.4em; 
color: #ffffff; 
line-height: 50px; 
}

В результаті буде отримано правильно позиціоновані логотип та іконку потрібного розміру. 

9. Тепер потрібно на мобільних пристроях абсолютно позиціонувати всі пункти меню нижче за панель.

 Для цього спочатку  треба додати наступний код:

nav { 
position: absolute; 
background-color: #3D4852; 
top:70px; 
left:0; 
width: 100%; 
}

10. Тепер треба  додати стилі списка і посилань:

nav ul {
 list-style-type: none; 
} 
nav ul li {
 padding: 0 15px;
 } 
nav ul li a { 
display: inline-block; 
padding: 12px; /* Додати нижче свої користувацькі стилі, щоб змінити відображення посилань */ 
color: #DAE1E7;
 text-decoration: none; 
letter-spacing: 0.05em;
} 

11. Також потрібно додати для посилань стилі при наведені і фокусі:

nav ul li a:hover, nav ul li a:focus { 
 color: #eb6f4a
} 

Тепер у браузері відображається таке:


 Цей код приховає все меню, тому що для властивості max-height встановлено значення 0, а для властивості overflow:hidden. 

Не  варто використовувати  для приховування меню валстсвість display: none, тому що  потрібний ефект анімації ковзання вниз. Він може бути досягнутий лише за допомогою властивості max-height.

Далі потрібно переключити відображення меню, використовуючи лише CSS. Найкращий спосіб зробити це – використовувати прихований чекбокс. Для цього використовуємо іконку гамбургера як мітку для цього чекбоксу. 
Після натискання мітки чекбокс буде вибрано. Тому  можна використовувати селектор псевдокласу :checked, щоб відобразити меню!

12. У файлі index.html додати елемент checkbox перед елементом nav:

 <input type="checkbox" id="checkbox">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <label for="checkbox">
                <i class="fa fa-bars menu-icon"></i>
            </label>

У цьому коді for=”checkbox” забезпечує, щоб чекбокс було встановлено/знято при кожному натисканні на цю мітку.

13. Далі потрібно приховати чекбокс. Для цього до файлу styles.css додати наступний код:

#checkbox {
    display: none;
}
#checkbox:checked ~ nav ul {
    max-height: 200px;
    padding: 15px 0;
    transition: all 0.5s;
}

Символ ~ є загальним селектором наступного суміжного елемента, який відокремлює два селектори (#checkbox:checked та nav ul). А також відповідає другому елементу, тільки якщо він слідує за першим. 

Коли чекбокс встановлено, меню зсувається вниз, тому що значення властивості max-height змінюється від 0 до більшого числа.

14. Іконка гамбургера не повинна відображатись на великих екранах, на яких достатньо місця для виводу посилань.

Тому треба додати кілька медіа-запитів для розмірів екрана планшета і більше, щоб відобразити безпосередньо посилання замість іконки меню. У файл styles.css додати наведений нижче медіа-запит.

@media (min-width: 768px) { 
    .menu-icon {
        display: none; /*Приховуємо іконку бургера*/
    }
    nav {
        position: relative;
        top: -10px;
        background-color: transparent;
    }
    nav ul {
        max-height: 70px;
        padding: 15px 0;
        text-align: right;
    }
    nav ul li {
        display: inline-flex; /*щоб посилання були поряд одне з одним*/
        padding-left: 20px;
    }
}

See the Pen burger menu flexbox by kravets (@raisa69) on CodePen.




Tags:
Нові Старіші