» »

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

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

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

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

Круглое меню для сайта на HTML+CSS

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

Стильное меню сайта на CSS

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

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

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

HTML

Код
<div class="lodsanedun">
  <div class="pdemudas">
  <a href="" class="adekope-dasuned fa fa-home fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-comment fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-play fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-camera fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-music fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-user fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-trash-o fa-2x"></a>
  <a href="" class="adekope-dasuned fa fa-star fa-2x"></a>
  </div>
  <a href="#" class="pogulas fa fa-th fa-2x"></a>
</div>

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

JS

Код
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');
}

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

Демонстрация
2019-11-14 Просмотров: 231 Комментарий: (0)

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

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

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

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