Меню для сайта с эффектом на JavaScript
 | |
| Вертикальное меню для сайта с красивым и невероятным эффектом, которое выполнено в темно прозрачном стиле, что происходит анимация CSS. Сейчас навигацией мало кого можно удивить, но все же есть еще меню, которые стоят вашего внимание, хоть и работают на JavaScript. Ведь сам эффект можно настроить в стилистике, а скрипт нам нужен для того, где бы вы не наводили клик, то от этого места начинается красивое оформление, что на темном или светлом сайте смотрится великолепно. По своему дизайну оно выполнено только для ключевых слов, где нет под категорий и разделов, но сам дизайн смотрится просто стильно, что безусловно приоткрытые сайта станет одним из примечателен, и главное, что он задействован под переходы по ключевым материалам. Так-же сами самостоятельно под один из разделов можете автономно поставить значение цвета, которое кардинально отличается от основного. Так выглядит навигации:  Установка: 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); }); }); На этом установочный процесс закончен, где такой стиль навигаций можно сделать на вновт созданной страницы, а также кто то решит его установить на главную под оформление. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
