ZorNet.Ru — сайт для вебмастера » Меню для сайта » Круговое вращающееся CSS меню сайта

Круговое вращающееся CSS меню сайта

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

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

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

Делаем клик для полного разворота навигаций:

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

Подключаем шрифты: В самый вверх в CSS:

Код

@import "https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

HTML

Код

CSS

Код

.lodsanedun,
.pdemudas {
  height: 256px;
  position: relative;
  width: 256px;
}

.lodsanedun {
  margin: 0 auto;
}

.pdemudas {
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  opacity: 0;

  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  -webkit-transform: scale(0.1) rotate(-270deg);
  -moz-transform: scale(0.1) rotate(-270deg);
  -transform: scale(0.1) rotate(-270deg);

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open .pdemudas {
  opacity: 1;

  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
}

.pogulas {
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  border: 2px solid #ffffff;
  bottom: 0;
  color: white;
  height: 80px;
  left: 0;
  line-height: 80px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 80px;

  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.open .pogulas {
  border-color: #aaaaaa;
}

.adekope-dasuned {
  border-radius: 50%;
  color: #eeeeee;
  display: block;
  height: 40px;
  line-height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  position: absolute;
  text-align: pogulas;
  width: 40px;
}

Код

var items = document.querySelectorAll('.adekope-dasuned');

for(var i = 0, l = items.length; i < l; i++) {
  items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";

  items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
}

document.querySelector('.pogulas').onclick = function(e) {
  e.preventDefault(); document.querySelector('.lodsanedun').classList.toggle('open');
}

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

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

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

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

СКАЧАТЬ

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

Kosten

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