Я пытаюсь найти лучший способ создать анимированное шестиугольное меню.
Пожалуйста, посмотрите для лучшего понимания рисунок:
Гамбургер кнопка в виде шестиугольника находится в центре.
После нажатия на неё отображаются треугольные фигуры, окружающие кнопку гамбургера.
Значок гамбургера превращается в крест, чтобы при повторном нажатии на него вернуть всё в исходное положение.
В моей поясняющей картинке на самом деле отсутствует один шаг в самом начале. На левой половине картинки должна отображаться только кнопка гамбургера.
Поэтому мой вопрос заключается в следующем:
Не могли бы вы посоветовать мне, как создавать эту анимацию из шестиугольника с помощью HTML, CSS через jQuery или другими способами.
Какие способы вы бы использовали, чтобы сделать это?
Источник
Ответ
Вариант с CSS-переменными + clip-path. Тут не вся функциональность, это лишь набросок, но идея, думаю, понятна.
UPD: добавил кнопку и еще немного причесал код.
document.querySelector('.menu__btn').addEventListener('click', () => {
document.querySelector('.menu').classList.toggle('menu--open');
});
:root {
--side: 200px;
--a: 25% 5%;
--b: 75% 5%;
--c: 100% 50%;
--d: 75% 95%;
--e: 25% 95%;
--f: 0% 50%;
--g: 50% 50%;
--x: 0;
--y: 0;
--coordAfter: 25px;
}
.menu {
width: var(--side);
height: var(--side);
padding: 0;
margin: 50px auto;
position: relative;
}
.menu__list {
padding: 0;
margin: 0;
list-style-type: none;
}
.menu__triangle {
position: absolute;
left: 0;
top: 0;
transition: transform .25s, opacity .25s;
background-color: #d261ff;
width: var(--side);
height: var(--side);
opacity: 0;
}
.menu__triangle:hover {
background-color: #9c29c1;
}
.menu--open .menu__triangle {
transform: translate3d(var(--x), var(--y), 0);
opacity: 1;
}
.menu__btn {
border: none;
background: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: #250031;
clip-path: polygon(var(--a), var(--b), var(--c), var(--d), var(--e), var(--f));
font-size: 0;
width: calc(var(--side) / 6);
height: calc(var(--side) / 6);
z-index: 1;
text-align: center;
}
.menu__btn:hover,
.menu--open .menu__btn {
background-color: #613175;
}
.menu__btn-dash {
width: calc(var(--side) / 14.285);
background-color: #fff;
height: 2px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.menu__btn-dash:after {
width: inherit;
height: inherit;
left: 0;
top: 0;
background-color: inherit;
transform: rotate(90deg);
transform-origin: 50% 50%;
transition: transform .2s;
position: absolute;
content: ' ';
}
.menu--open .menu__btn-dash:after {
transform: rotate(0);
}
.menu__1 {
clip-path: polygon(var(--a), var(--b) , var(--g));
--y: calc(var(--coordAfter) * -1);
}
.menu__2 {
clip-path: polygon(var(--g), var(--b), var(--c));
--y: calc(var(--coordAfter) * -1/2);
--x: var(--coordAfter);
}
.menu__3 {
clip-path: polygon(var(--g), var(--c), var(--d));
--y: calc(var(--coordAfter) / 2);
--x: var(--coordAfter);
}
.menu__4 {
clip-path: polygon(var(--e), var(--g), var(--d));
--y: var(--coordAfter);
}
.menu__5 {
clip-path: polygon(var(--f), var(--g), var(--e));
--x: calc(var(--coordAfter) * -1);
--y: calc(var(--coordAfter) / 2);
}
.menu__6 {
clip-path: polygon(var(--f), var(--a), var(--g));
--x: calc(var(--coordAfter) * -1);
--y: calc(var(--coordAfter) * -1/2);
}
Комментариев нет:
Отправить комментарий