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

Круглое анимационное меню для сайта на CSS3

Это современное меню в круглом виде с элементами анимации и выпадающими пунктами, что происходит по клику, что создано с помощью CSS3. В этом материале давайте посмотрим, как веб мастер легко и просто может создать отличное анимированное и радиальное меню с помощью CSS3 и также JavaScript. Где изначально можете посмотреть на демонстрационную версию, что находится ниже, что сразу можете определить, подойдет на интернет площадку.

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

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

HTML

Давайте посмотрим HTML, который будет использоваться в каркасе навигации с внутренними ссылками под кнопку для активации радиального меню.

Код

CSS

Первое, что делаем, это задаем или определяем ширину и высоту корневого контейнера нашего радиального меню, где в этом случае элемент nav с классом круглого меню.

Код

.vakilpotu_mazurikad {
  width: 249.7px;
  height: 249.7px;
  margin: 0 auto;
  position: relative;
}

.zornetus {
  width: 249.7px;
  height: 249.7px;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

.daretunga.zornetus {
  opacity: 1;

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

.zornetus a {
  text-decoration: none;
  color: white;
  display: block;
  height: 39.5px;
  width: 39.5px;
  line-height: 39.5px;
  margin-left: -19px;
  margin-top: -19px;
  position: absolute;
  text-align: center;

}

.zornetus a:hover {
  color: #ededf5;
}

.asextu_hsaderkon {
  position: absolute;
  top: calc(49.9% - 29.7px);
  left: calc(49.9% - 29.7px);
  text-decoration: none;
  text-align: center;
  color: #1d1a1a;
  border-radius: 93%;
  display: block;
  height: 39.5px;
  width: 39.5px;
  line-height: 39.5px;
  padding: 9px;
  background: #e6e6f3;
}

.asextu_hsaderkon:hover {
  background-color: #f1f1f3;
}

h1.author {
  text-align:center;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
}

h1.author a {
  color: #263675;
  text-decoration:none;
}

h1.author a:hover {
  color: #efe8e8;
}

JavaScript

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

Код

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('.asextu_hsaderkon').onclick = function(e) {
  e.preventDefault(); document.querySelector('.zornetus').classList.toggle('daretunga');
}

Остается прописать стиль под шрифты, для того, чтоб кнопки выводить.

Код

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

Думаю вам поможет вам сделать уникальное меню, что будет привлекать внимание и работать по своему прямому назначению.

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

16 Мая 2018 Просмотров: 2190 Комментариев: (0)

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

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

Kosten

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