Горизонтальне адаптивне меню навігації flexbox + js

Raisa Kravets -

Базовий HTML - код для макета:

<nav class="navbar">
    <a href="#" class="logo">logo</a>
    <ul class="main-nav" id="js-menu">
        <li>
                <a href="#" class="nav-links">Home</a>
        </li>
        <li>
                <a href="#" class="nav-links">Products</a>
        </li>
        <li>
                <a href="#" class="nav-links">About Us</a>
        </li>
        <li>
                <a href="#" class="nav-links">Contact Us</a>
        </li>
        <li>
                <a href="#" class="nav-links">Blog</a>
        </li>
     </ul>
</nav>


Можна використовувати будь-які імена для класів та ідентифікаторів.



Це те, що буде отримано після написання наведеного вище коду, меню потрібно стилізувати, оформивши його за допомогою CSS.

Додамо базовий стиль, щоб це виглядало гарно:

* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
font-size: 18px;
background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}



Потрібно скинути стандартні відступи і поля кожного елемента за допомогою універсального селектора (*) і встановити для параметра box-sizing значення border-box, щоб полегшити зміну розміру елементів.

У прикладі  використовується  шрифт «Josefin Sans» для панелі навігації та лінійний градієнт для фону. Можна вибрати власні шрифти, кольори та фон.

Тепер потрібно додати відступ і поле, щоб виглядало краще.

.main-nav li {
text-align: center;
margin: 15px auto;
}

.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}

Кнопка перемикання

 Тепер потрібно додати маленьку кнопку-перемикач у верхньому правому куті. Для цього прикладу використано піктограми Font Awesome, які можна підключити з бібліотеки 

font-awesome - Libraries:  https://cdnjs.com/libraries/font-awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">




Маленький значок гамбургера  з'явився у верхньому лівому куті, це виглядає дивно. Потрібно змінити його розташування та стиль.

.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255,255,255,0.8);
font-size: 24px;
}




Панель навігації для мобільних пристроїв майже завершена. Потрібно додати JavaScript, щоб увімкнути меню перемикання.

Пункти меню, щоб воно не відображалися за замовчуванням - приховані:

.active {
display: block;
}

Тепер додамо код JavaScript, щоб зробити його видимим, коли хтось натискає піктограму гамбургера.

let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function () {
mainNav.classList.toggle('active');
});




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

Для великих екранів:

Для екранів більше 768px  потрібно  змінити властивість flex-direction на row і надати класу .navbar властивість display flex.




@media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}


See the Pen navbar-flexbox-responsive-js by raisa_kravets (@raisa69) on CodePen.





Нові Старіші