ZorNet.Ru — сайт для вебмастера » Меню для сайта » Расширяемые круговые меню на HTML/CSS

Расширяемые круговые меню на HTML/CSS

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

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

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

При открытие сайта или страницы:

Здесь делаем клик по кнопке и раскрываем навигацию:

Установочный процесс:

Подключаем библиотеку и шрифтовые кнопки:

Код

HTML

Код

CSS

Код

.gasucu-laenu {
  width: 100%;
  height: 100vh;
  position: relative;
}
.kuidasp-sedumas {
  background: #DA7071;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background .3s;
  z-index: 2;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);
}
.kuidasp-sedumas:hover,
.active {
  background: #D15052;
}
.kuidasp-sedumas, .icons-gasucu-laenu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition-delay: .1s;
}
.kuidasp-sedumas span {
  display: block;
  width: 30px;
  height: 3px;
  background: #333;
  margin-bottom: 5px;
  transition: background .3s, transform .3s;
}
.kuidasp-sedumas span:last-child {
  margin-bottom: 0;
}
.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.active span:nth-child(2) {
  opacity: 0;
}
.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -5px);
}

.icons {
  position: relative;
}
.icon {
  position: absolute;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  background: #272C2C;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  cursor: pointer;
  transform: translate(0px, 0px);
  z-index: 1;
}
.icon:hover {
  background: #DA7071;
}
.icon:hover .fa {
  color: #272C2C;
}
.fa {
  margin: auto;
  color: #DA7071;
  font-size: 30px;
}
.icon:nth-child(1) {
  transition: background .3s, transform .3s .10s;
}
.icon:nth-child(2) {
  transition: background .3s, transform .3s .15s;
}
.icon:nth-child(3) {
  transition: background .3s, transform .3s .20s;
}
.icon:nth-child(4) {
  transition: background .3s, transform .3s .25s;
}
.icon:nth-child(5) {
  transition: background .3s, transform .3s .30s;
}
.icon:nth-child(6) {
  transition: background .3s, transform .3s .35s;
}
.icon:nth-child(7) {
  transition: background .3s, transform .3s .40s;
}
.icon:nth-child(8) {
  transition: background .3s, transform .3s .45s;
}

.show:nth-child(1) {
  transform: translate(0px, -150px);
}
.show:nth-child(2) {
  transform: translate(110px, -110px);
}
.show:nth-child(3) {
  transform: translate(150px, 0px);
}
.show:nth-child(4) {
  transform: translate(110px, 110px);
}
.show:nth-child(5) {
  transform: translate(0px, 150px);
}
.show:nth-child(6) {
  transform: translate(-110px, 110px);
}
.show:nth-child(7) {
  transform: translate(-150px, 0px);
}
.show:nth-child(8) {
  transform: translate(-110px, -110px);
}

Код

$(function(){
  var $btn = $('.btn'),
  $menuBtn = $('.kuidasp-sedumas'),
  $icon = $('.icon');

  $menuBtn.on('click', function(){
  $(this).toggleClass('active');
  $icon.toggleClass('show');
  $btn.toggleClass('active');
  });
});

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

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

14 Ноября 2019 Загрузок: 2 Просмотров: 1122 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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