Стильное материальное горизонтальное меню на 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
@property --activeclr { syntax: "<color>"; initial-value: #e4ecfa; inherits: true; } .wrapper { border-radius: 1rem; overflow: hidden; height: 8rem; width: 22rem; background: var(--activeclr); box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; } .navbar { display: flex; justify-content: space-between; height: 4.5rem; background: white; padding: 0 0.75rem; transition: padding 300ms ease; } .navbar:has(.navsearch.active) { padding: 0 0.75rem; } .navitem, .navsearch { position: relative; display: grid; place-content: center; color: #fff; width: 4.5rem; text-align: center; color: black; font-size: 1.5rem; transition: width 300ms ease, flex-grow 300ms ease; } .navbar:has(.navsearch.active) .navitem { width: 3rem; } .hoverindicator { position: absolute; width: 2.5rem; inset: 50% auto auto 50%; transform: translate(-50%, -50%); background: var(--activeclr); opacity: 0; border-radius: 0.5rem; height: 0.25rem; inset: auto auto -0.25rem 50%; transition: inset 300ms ease, opacity 300ms ease; } @media (hover: hover) { .navitem:not(.active):hover .hoverindicator, .navsearch:not(.active):hover .searchbox { border-radius: 1.25rem; height: 2.5rem; opacity: 1; transition: opacity 150ms ease; } } .active .hoverindicator { opacity: 1; border-radius: 0.5rem; height: 0.25rem; inset: auto auto 0.25rem 50%; transition: inset 300ms ease, height 300ms ease, border-radius 300ms ease; } .navsearch.active { flex-grow: 1; } .searchbox { position: absolute; inset: 1rem; background: var(--activeclr); border-radius: 1.25rem; opacity: 0; transition: inset 300ms ease, padding 300ms ease, color 100ms ease, opacity 300ms ease; -webkit-appearance: none; border: none; padding: 0 1rem 0 1rem; font-size: 1rem; color: transparent; } .active .searchbox { inset: 1rem 0.25rem; height: 2.5rem; border-radius: 1.25rem; padding: 0 2.5rem 0 1rem; opacity: 1; color: black; transition: inset 300ms ease, padding 300ms ease, color 200ms ease 50ms, opacity 300ms ease; } .searchicon { position: absolute; inset: 0 0 0 auto; width: 4.5rem; display: grid; place-content: center; transition: width 300ms ease; } .active .searchicon { width: 3rem; } |
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 35 36 37 38 39 40 41 42 43 44 |
<div class="wrapper"> <div class="navbar"> <a href="#" class="navitem active" onclick="select(this)" data-clr="#e4ecfa"> <div class="indicator"></div> <div class="hoverindicator"></div> <ion-icon name="home"></ion-icon> </a> <a href="#" class="navitem" onclick="select(this)" data-clr="#fff6cc"> <div class="indicator"></div> <div class="hoverindicator"></div> <ion-icon name="person"></ion-icon> </a> <div class="navsearch"> <input class="searchbox"></input> <div class="searchicon" onclick="selectsearch()"> <ion-icon name="search"></ion-icon> </div> </div> <a href="#" class="navitem" onclick="select(this)" data-clr="#f0e4fa"> <div class="indicator"></div> <div class="hoverindicator"></div> <ion-icon name="cog"></ion-icon> </a> </div> </div> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script> <script type="text/javascript"> function select(el) { document.querySelector(".navsearch").classList.remove("active") document.querySelector(".active").classList.remove("active") el.classList.add("active") document.body.style.setProperty('--activeclr', el.dataset.clr); } function selectsearch() { console.log("select") const el = document.querySelector(".navsearch") el.classList.toggle("active") if (el.classList.contains("active")) { document.querySelector(".searchbox").focus() } } </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
