Темное меню с отзывчивым дизайном для сайтов с анимацией. Это простое адаптивное меню, где принимается анимация при наведении клика. Оно по своей стилистике не сильно от других отличается, также эта навигация отлично выстроенная под мобильные аппараты. Где автоматически выводит все запросы, где все появится в один клик. Но и все по стандарту, это логотип по левую сторону и запросы ключевых слов по правую, где также применяется эффект с наведении курсора.
При проверки на адаптивность:
1.
2.
3.
Установочный процесс:
HTML
Код
<nav>
<div class="logo">
<h4>ZorNet.Ru</h4>
</div>
<ul class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
CSS
Код
nav{
background: #333;
display: flex;
justify-content:space-around;
align-items: center;
color: #fff;
}
.nav-links {
display: flex;
justify-content:space-around;
width: 50%;
text-transform: uppercase;
}
.nav-links a{
display: block;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-bottom:2px solid transparent;
transition:0.5s ease;
transform: translateX(0%);
}
.nav-links a:hover{
color:#38b8ff;
letter-spacing: 5px;
}
.burger{
display: none;
}
.burger div{
width: 25px;
height: 3px;
background: #fff;
margin: 5px;
transition:all 0.5s ease;
}
@media only screen and (max-width: 760px){
nav{
justify-content: space-between;
padding: 0 5vw;
}
.nav-links{
position: absolute;
right: 0;
top:8vh;
min-height:92vh;
background: #333;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
margin: 0;
padding: 0;
transform: translateX(100%);
transition:All 0.5s ease-in;
}
.nav-links a{
opacity: 0;
}
.burger{
display: block;
}
}
@media only screen and (max-width: 640px){
nav{
justify-content: space-between;
padding: 0 5vw;
}
}
.nav-active{
transform: translateX(0);
}
@media only screen and (max-width: 460px){
.nav-links{
width: 100%;
transition:All 0.5s ease;
}
}
.nav-active{
transform: translateX(0);
}
@keyframes navLinkFade{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,6px );
}
.toggle .line2{
opacity: 0;
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-6px );
}
JS
Код
const navSlide = () => {
const burger = document.querySelector(".burger");
const nav = document.querySelector(".nav-links");
const navLinks = document.querySelectorAll(".nav-links a");
burger.addEventListener("click", () => {
nav.classList.toggle("nav-active");
navLinks.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");
});
//
};
navSlide();
Это распространенный дизайн для горизонтального меню, как темная гамма, что для светлого формата сайта станет отличным навигатором по сайту, а главное красиво смотреться.
Демонстрация
