• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Адаптивное меню анимации с помощью JS + CSS (Полноэкранное темное меню на CSS с эффектом анимации)
Адаптивное меню анимации с помощью JS + CSS
Kosten
Дата: Воскресенье, 2021-01-24, 22:56 | Сообщение 1
Оффлайн
Администраторы
Сообщений:37504
Награды: 65


Темное меню с отзывчивым дизайном для сайтов с анимацией. Это простое адаптивное меню, где принимается анимация при наведении клика. Оно по своей стилистике не сильно от других отличается, также эта навигация отлично выстроенная под мобильные аппараты. Где автоматически выводит все запросы, где все появится в один клик. Но и все по стандарту, это логотип по левую сторону и запросы ключевых слов по правую, где также применяется эффект с наведении курсора.

При проверки на адаптивность:

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();

Это распространенный дизайн для горизонтального меню, как темная гамма, что для светлого формата сайта станет отличным навигатором по сайту, а главное красиво смотреться.

Демонстрация
Прикрепления: 6308681.png(17.1 Kb) · 4263352.png(2.2 Kb) · 5177110.png(10.4 Kb) · animation-menu.zip(4.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Адаптивное меню анимации с помощью JS + CSS (Полноэкранное темное меню на CSS с эффектом анимации)
  • Страница 1 из 1
  • 1
Поиск: