ZorNet.Ru — сайт для вебмастера » Меню для сайта » Меню для сайта с эффектом на JavaScript

Меню для сайта с эффектом на JavaScript

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

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

Так выглядит навигации:

Вертикальное меню для сайта на HTML+CSS

Установка:

HTML

Код
<div class="menu">
<div class="fancy-hover">
  <i class="fa fa-pencil" aria-hidden="true"></i> Скрипты
</div>
<div class="fancy-hover">
  <i class="fa fa-sort" aria-hidden="true"></i> Шаблоны
</div>
<div class="fancy-hover">
  <i class="fa fa-star" aria-hidden="true"></i> Скачать
</div>
<div class="fancy-hover fancy-hover--blue">
  <i class="fa fa-share-square-o" aria-hidden="true"></i> Связь
</div>
<div class="fancy-hover">
  <i class="fa fa-trash-o" aria-hidden="true"></i> Переход
</div>
</div>

CSS

Код
:root {
  --px: 0;
  --py: 0;
}

.fancy-hover {
  background: #242424;
  background: rgba(36,36,36,0.9);
  color: #FFF;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 1em 1em;
  position: relative;
  overflow: hidden;
  border-bottom: solid 1px #333;
  z-index: 2;
  transition: background-color 0.2s linear;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.fancy-hover:before,
.fancy-hover:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.1s linear;
}

.fancy-hover:before {
  width: 160px;
  height: 120px;
  background: radial-gradient(circle at center, #FFF 0%, transparent 60%);  
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(  
  calc( var(--px) * 1px ),
  calc( var(--py) * 1px )  
  ) translate(-50%, -50%);
   
}

.fancy-hover:after {
  background: inherit;
  margin: 2px;
  top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition-delay: 0.05s;
}

.fancy-hover:hover { background-color: rgba(56,56,56,0.9); }
.fancy-hover:hover:before { opacity: 0.6; }
.fancy-hover:hover:after { opacity: 0.85; transition-delay: 0s; }

/* ////////////////////////////////////////////////////////////////////////// */

.fancy-hover--blue:hover { background-color: #24455E; }

/* ////////////////////////////////////////////////////////////////////////// */

.menu { overflow: hidden; border: solid 1px #444444; width: 15em; border-radius: 3px; opacity: 0.958; }
.menu :last-child { margin-bottom: 0; }
.fa { width: 1.25em; margin-right: 0.5em; font-size: 1.25em; text-align: center; }
html { height: 100%; display: flex; overflow: hidden; }
body { max-width: 90%; margin: auto; background: #000; }

JS

Код
Array.from(
  document.querySelectorAll('.fancy-hover'),
  function(el){

  el.addEventListener('mousemove',function(e){
  el.style.setProperty('--px', e.clientX - el.offsetLeft);
  el.style.setProperty('--py', e.clientY - el.offsetTop);
  });

  });

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

Демонстрация
2020-08-22 Загрузок: 1 Просмотров: 367 Комментарий: (1)

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

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

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

Комментарий: 1
Kosten
Kosten 2020-08-22 21:511
0
На прикрепленном изображение можно рассмотреть, как не темном фоне смотрится, так и на цветной палитре цвета, хотя сама основа редактируется в CSS.
avatar