, примерно так:
Шаг 2: Дизайн панели навигации с помощью CSS
Теперь мы должны добавить стили CSS, чтобы придать панели навигации желаемый дизайн. Начнем с назначения фона и размера шрифта для ссылок. Добавим следующий код в CSS:
.nav-container {
background-color: #ebebeb;
font-size: 18px;
}
Затем мы добавим стили для наших ссылок и кнопок навигации. Можно изменить цвет фона ссылок при наведении пользователем курсора на них:
.nav-container ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.nav-container li {
margin: 0 15px;
}
.nav-container a {
color: #333;
padding: 10px 15px;
text-decoration: none;
}
.nav-container a:hover {
background-color: #333;
color: #fff;
}
Шаг 3: Добавление JS механизма «бургер-меню»
На смартфонах и планшетах не так много места, поэтому устройства с маленькими экранами часто используют механизм «бургер-меню». Пользователь может нажать на кнопку меню, чтобы увидеть выпадающий список ссылок, которые выводятся вместо панели навигации. Мы можем добавить этот механизм используя JavaScript. Вот пример кода JS, который выполняет эту функцию:
const burger = document.querySelector(«.burger»);
const navLinks = document.querySelector(«.nav-links»);
const links = document.querySelectorAll(«.nav-links li»);
burger.addEventListener(«click», () => {
// Активация кнопки бургер-меню
navLinks.classList.toggle(«nav-active»);
// Анимация ссылок
links.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = «»;
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
// Анимация кнопки бургер-меню
burger.classList.toggle(«toggle»);
});
Шаг 4: Обновление CSS для механизма «бургер-меню»
CSS нужно дополнительно обновить для механизма «бургер-меню». Вот пример:
.nav-links {
position: absolute;
right: 0;
height: 92vh;
top: 8vh;
background-color: #333;
display: flex;
flex-direction: column;
justify-content: space-evenly;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.nav-links li {
opacity: 0;
}
.nav-links.nav-active {
transform: translateX(0%);
}
.nav-links li a {
color: #fff;
font-size: 18px;
}
.burger {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 40px;
height: 40px;
cursor: pointer;
}
.line {
width: 100%;
height: 4px;
background-color: #333;
border-radius: 5px;
transition: all 0.3s ease;
}
Шаг 5: Добавление панели навигации на веб-сайт
Теперь, когда панель создана, добавляем ее на веб-страницу. Для этого нужно вставить код HTML и код CSS в соответствующие страницы.
Горизонтальная панель навигации является важным элементом, который нужно добавить на веб-сайт. Создание и настройка панели навигации может показаться сложным заданием, но если следовать нашей пошаговой инструкции, вы сможете легко создать свою уникальную панель и сделать ее функциональной и красивой.