ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Простая панель вкладок на CSS с анимацией

Простая панель вкладок на CSS с анимацией

Отличное решение на простую панель вкладок, которая выполнена на CSS с анимацией, а также JavaScript для эффекта, который идет при переключение. По сути это горизонтальная навигация, где вместо надписей вы увидите красивые шрифтовые кнопки. А где их можно задействовать, но примерно такой стиль стоит у меня на форуме. Что выполняет стандартные переходы данной категорий. Что не удивлюсь, где сделают больше под навигацию.

Скрипт вы можете убрать, где только останется эффект от стилей, что при наведении меняется оттенок. А скрипт отвечает за то, что при наведении аналогично меняется гамма цвета, но при клике она еще остается на той кнопки, по которой был сделан клик. Что изначально можно понять, это какая функция включена, а не просто гадать и переключать. Тем он по своим характеристикам больше востребован на любом тематическом сайте. Так как по сути, из данной панели можно создать горизонтальное меню, или сделать более оригинальную панель по своему оформлению.

Так смотрятся, где включена одна из них.

В светлом фоне:

В темном фоне:

Установка:

HEAD на шрифтовой стиль

Код

HTML

Код

CSS

Код

.nav {
  background-color: white;
  box-shadow: 0 0 10px 5px #e1e5ee;
  border-radius: 0 0 2rem 2rem;
  overflow: hidden;
  padding: 0.4rem;
  width: 24rem;
}
.nav__list {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.nav__navegasuy {
  list-style: none;
  padding: 1.2rem;
  cursor: pointer;
  position: relative;
}
.nav__navegasuy::before {
  content: "";
  width: 4rem;
  height: 4rem;
  background-color: #f3e5f5;
  display: block;
  border-radius: 2rem;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 400ms cubic-bezier(0, 0.76, 0.58, 1.43);
  transform: scale(0);
  z-index: 1;
}
i.fas{
  color: #767b91;
  font-size: 25px;

}
.nav__navegasuy i.fas {
  fill: #767b91;
  width: 2rem;
  transition: fill 400ms cubic-bezier(0, 0.76, 0.58, 1.43);
  z-index: 99;
  position: relative;
}
.nav__navegasuy:hover i.fas {
  color: #aa00ff;
}
.nav__navegasuy-active i.fas {
  color: #aa00ff;
}
.nav__navegasuy-active::before {
  transform: scale(1);
}

Код

let nav = document.querySelector(".nav");
let navnavegasuy = document.querySelectorAll(".nav__navegasuy");

navnavegasuy.forEach((link) => link.addEventListener("click", listActive));

function listActive() {
navnavegasuy.forEach((link) => link.classList.remove("nav__navegasuy-active"));
this.classList.add("nav__navegasuy-active");
}

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

Демонстрация

20 Октября 2022 Загрузок: 2 Просмотров: 798 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0