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

Плавающее круглое меню на CSS и JS

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

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

Так выглядит полноценная навигация при открытие:

Меню для сайта на HTML+CSS

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

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

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

HTML

Код
<div id="mainMenu" class="nimateda-mstru-ctuenu kagounenu2">
  <div class="navire kagounenu3"></div>
  <div class="itemMenuBox bills"><a href="/" target="_blank" class="itemMenu "><i class="fa fa-file-text-o" aria-hidden="true"></i></a></div>
  <div class="itemMenuBox tarsheed"><a href="/" class="itemMenu "><i class="fa fa-diamond" aria-hidden="true"></i></a></div>
  <div class="itemMenuBox employees"><a href="/" class="itemMenu "><i class="fa fa-users" aria-hidden="true"></i></a></div>
  <div class="itemMenuBox location"><a href="/" class="itemMenu "><i class="fa fa-location-arrow" aria-hidden="true"></i></a></div>
  <div class="itemMenuBox eservices"><a href="/" class="itemMenu "><i class="fa fa-key" aria-hidden="true"></i></a></div>
  <div class="itemMenuBox contact"><a href="/" class="itemMenu "><i class="fa fa-phone" aria-hidden="true"></i></a></div>
   
  <a href="/" class="toggleMenu kagounenu" ><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>

CSS

Код
body{background-color: rgba(218, 245, 255, 0.97);font-family: 'Oswald', sans-serif;}

.navire{background:url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/navire_n02z6s.png) no-repeat; background-size:100% auto; width:120px; height:100px; position:absolute; top:-50px; right:-130px;-webkit-transition: right 0.2s ease; transition: right 0.2s ease; }

.nimateda-mstru-ctuenu.open .navire{right:70%;-webkit-transition: right 28s ease 1s; transition: right 28s ease 1s;}
/* ### main Menu Overlay */
.nimateda-mstru-ctuenu {
  background-color: rgba(34, 152, 195, 0.84);
  position: fixed;left: 0;right: 0;bottom: -420px;z-index: 999;
  height: 420px;
  box-shadow: 0 0 15px -3px #03374A;
  border-radius: 100% 100% 0 0 / 14% 14% 0 0;
  -webkit-transition: bottom 0.5s ease; transition: bottom 0.5s ease;
}

.nimateda-mstru-ctuenu.open { bottom: 0; }

.nimateda-mstru-ctuenu .toggleMenu {
  display: block;
  background-color:#65B5D0;
  border: 1px solid #FFF; border-radius: 80px;
  width: 62px;height: 62px;
  position: absolute;top: -12px;left: 50%;
  margin: -31px 0 0 -31px;
  cursor: pointer;
  font-size:24px; color:#FFF; text-align:center; line-height:62px;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2) inset, 0 0 16px -4px #063343;
  -webkit-transition: box-shadow 0.5s ease, top 0.5s ease; transition: box-shadow 0.5s ease, top 0.5s ease;
}

.nimateda-mstru-ctuenu .toggleMenu:hover, .nimateda-mstru-ctuenu .toggleMenu:active{}

.nimateda-mstru-ctuenu.open .toggleMenu { top: 50%; background-color: #2298C3;}

.nimateda-mstru-ctuenu .itemMenuBox {
  background: url(http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/go2.png) no-repeat center center;background-size: 28px auto;
  position: absolute; top: 50%; left: 50%;
  margin: -31px 0 0 -31px;
  height: 62px; width: 142px;
  text-align: right;
  border-radius: 40px;
  -webkit-transform-origin: 31px 31px;
  -ms-transform-origin: 31px 31px;
  transform-origin: 31px 31px;
  -webkit-transition: all 1s ease 0.4s;
  transition: all 1s ease 0.4s;
}

.nimateda-mstru-ctuenu.open .itemMenuBox {width: 182px; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s;
}

.nimateda-mstru-ctuenu .itemMenuBox.bills {-webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.tarsheed {-webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.employees {-webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.location {-webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.eservices {-webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.contact {-webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg);
}

.nimateda-mstru-ctuenu .itemMenuBox .itemMenu {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.6); border-radius: 40px;
  background-color: #1f97c2; background-repeat: no-repeat; background-position: center center;
  width: 62px;height: 62px;
  border-radius: 40px;
  transition: all 0.8s ease;
  color:#FFF; font-size:28px; line-height:64px; text-align:center;
}

.nimateda-mstru-ctuenu .itemMenuBox.bills .itemMenu {
  -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.tarsheed .itemMenu {
  -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.employees .itemMenu {
  -webkit-transform: rotate(330deg);-ms-transform: rotate(330deg);transform: rotate(330deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.location .itemMenu {
  -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.eservices .itemMenu {
  -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.contact .itemMenu {
  -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg);
}

/* Hover */
.nimateda-mstru-ctuenu .itemMenuBox.bills .itemMenu:hover {
  -webkit-transform: rotate(450deg); -ms-transform: rotate(450deg); transform: rotate(450deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.tarsheed .itemMenu:hover {
  -webkit-transform: rotate(390deg); -ms-transform: rotate(390deg); transform: rotate(390deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.employees .itemMenu:hover {
  -webkit-transform: rotate(690deg); -ms-transform: rotate(690deg); transform: rotate(690deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.location .itemMenu:hover {
  -webkit-transform: rotate(630deg); -ms-transform: rotate(630deg); transform: rotate(630deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.eservices .itemMenu:hover {
  -webkit-transform: rotate(570deg); -ms-transform: rotate(570deg); transform: rotate(570deg);
}

.nimateda-mstru-ctuenu .itemMenuBox.contact .itemMenu:hover {
  -webkit-transform: rotate(510deg); -ms-transform: rotate(510deg); transform: rotate(510deg);
}

.kagounenu{
  -webkit-animation-name: kagounenux;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: kagounenu;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes kagounenux{
  from {-webkit-transform:translate(0, 0px);}
  65% {-webkit-transform:translate(0, 5px);}
  to {-webkit-transform: translate(0, -0px); }  
}
   
@-moz-keyframes kagounenu{
  from {-moz-transform:translate(0, 0px);}
  65% {-moz-transform:translate(0, 5px);}
  to {-moz-transform: translate(0, -0px);}  
}

.kagounenu2{
  -webkit-animation-name: kagounenux2;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: kagounenu2;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes kagounenux2{
  from {-webkit-transform:translate(0, 0px);}
  45% {-webkit-transform:translate(0, 8px);}
  to {-webkit-transform: translate(0, -0px); }  
}
   
@-moz-keyframes kagounenu2{
  from {-moz-transform:translate(0, 0px);}
  45% {-moz-transform:translate(0, 8px);}
  to {-moz-transform: translate(0, -0px);}  
}

.kagounenu3{
  -webkit-animation-name: kagounenux3;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: kagounenu3;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes kagounenux3{
  from {-webkit-transform:translate(0, 0px);}
  50% {-webkit-transform:translate(2px, 4px);}
  to {-webkit-transform: translate(0, -0px); }  
}
   
@-moz-keyframes kagounenu3{
  from {-moz-transform:translate(0, 0px);}
  50% {-moz-transform:translate(2px, 4px);}
  to {-moz-transform: translate(0, -0px);}  
}

JS

Код
$(".toggleMenu").on('click', function(){
  $("#mainMenu").toggleClass('open');
});

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

Демонстрация
13 Ноября 2019 Загрузок: 1 Просмотров: 1041 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

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

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