» »

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

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

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

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

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

Адаптивное меню на CSS для сайта

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

Круглое меню сайта на CSS

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

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

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

HTML

Код
<div class="gasucu-laenu">
  <div class="kuidasp-sedumas">
  <div class="btn">
  <span></span>
  <span></span>
  <span></span>
  </div>
  </div>

  <div class="icons-gasucu-laenu">
  <div class="icons">
  <div class="icon"><i class="fa fa-facebook"></i></div>
  <div class="icon"><i class="fa fa-twitter"></i></div>
  <div class="icon"><i class="fa fa-pinterest-p"></i></div>
  <div class="icon"><i class="fa fa-envelope"></i></div>
  <div class="icon"><i class="fa fa-phone"></i></div>
  <div class="icon"><i class="fa fa-vk"></i></div>
  <div class="icon"><i class="fa fa-google"></i></div>
  <div class="icon"><i class="fa fa-youtube"></i></div>
  </div>
  </div>
</div>

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

JS

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

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

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

Демонстрация
2019-11-14 Загрузок: 1 Просмотров: 241 Комментарий: (0)

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

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

Оставь свой отзыв

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