Стильное светлое горизонтальное меню с эффектом слайда на CSS3 и Javascript
Классное светлое меню для вашего сайта на CSS3 и Javascript
Для начала посмотрите ДЕМО
Установка:
1#: В самый верх вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
@import url(https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css) all; .container { left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); } .selector { padding: 0.25rem; background-color: #efefef; width: min-content; border-radius: 12px; position: relative; } .selector-item { white-space: nowrap; padding: 0.75rem 1.5rem; cursor: pointer; z-index: 2; user-select: none; transition: color 0.2s ease; } .selector-item--active { color: white; } .highlight { background-color: #ff4757; border-radius: 8px; position: absolute; left: 0.25rem; width: 4.75rem; height: 2.6rem; z-index: 1; box-shadow: 0px 0px 12px -2px rgba(255,71,86,0.9); transition: left 0.2s ease, width 0.2s ease; } |
2#: После открывающего тега <body> или в то место, где хотите видеть меню, поместите:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="container"> <div class="selector" self="size-x1" layout="row center-left"> <div class="highlight"></div> <div class="selector-item" onclick="selectItem(event)">Home</div> <div class="selector-item" onclick="selectItem(event)">Messages</div> <div class="selector-item" onclick="selectItem(event)">Account</div> </div> </div> <script type="text/javascript"> let highlight; function addClass(target) { target.classList.add('selector-item--active'); } function selectItem(event) { const target = event.target; const items = document.querySelectorAll('.selector-item'); const parent = document.querySelector('.selector'); const targetRect = target.getBoundingClientRect(); const parentRect = parent.getBoundingClientRect(); items.forEach(el => el.classList.remove('selector-item--active')); highlight.style.left = `${targetRect.left - parentRect.left}px`; addClass(target); setHighlightWidth(target); } function setHighlightWidth(target = null) { const itemTarget = target || document.querySelector('.selector-item'); const rect = itemTarget.getBoundingClientRect(); addClass(itemTarget) highlight = document.querySelector('.highlight'); highlight.style.width = `{rect.width}px`; } setHighlightWidth(); </script> |
