Как перестроить значок мобильного меню «гамбургер» в такое?

Question

[maxxim9595]

Есть самый обычная иконка мобильного меню "гамбургер", в виде трёх горизонтальных полосок. Очень часто делают так, что при открытии меню иконка, то есть 3 линии, плавно трансформируются в крестик. Однако у моего заказчика свой путь, и он хочет, чтобы она трансформировалась в это:

Может быть, кто-то знает, как лучше реализовать подобное, или у кого-то есть готовый вариант такой трансформации, или вы знаете, где его найти?

Comments

[Rustam Bainazarov]

В чём прикол сложности?

5 элементов на абсолютном позиционированимэи внутри одного родителя: 4 половинки и 1 большая плашка. Это и будут ваши «три полоски».

После трансформации 1 большая плашка исчезает, а 4 половинки образуют вот эту фигуру.

[maxxim9595]

Рустам Байназаров, Спасибо! Я так это и представлял. Не сочтите за наглость, просто осталось крайне мало времени, а помимо этого есть куча другой работы, поэтому ищу готовые варианты, типа всяких css библиотек, но везде только трансформация в крестик или одну стрелку... Но все равно спасибо за ответ. Если ничего не найдется, буду так и делать

[Brad9aga]

Рустам Байназаров, https://fontawesome.ru/icon/angle-double-up/
самое элементарное )если не нужны анимации

[Rustam Bainazarov]

maxxim9595, написал ответ, только нужно приспособить под вас.

[Rustam Bainazarov]

Brad9aga, с анимациями тоже не сложно сделать.

[maxxim9595]

Рустам Байназаров, спасибо большое!!!

Answer 1

[Rustam Bainazarov]

C телефона было сложно, но примерно так:


Как правильно отметил Brad9aga в своем примере, лучше первую и последнюю полоски сдвигать, так лучше выглядит:

Comments

[Brad9aga]

https://jsfiddle.net/exc6tqfj/
чутка модернизировал

[Rustam Bainazarov]

Brad9aga, да, согласен, лучше первую и последнюю линии половинками делать, так интереснее.

[Brad9aga]

Рустам Байназаров, готово

[Rustam Bainazarov]

Brad9aga, а думал, ты поленишься, сделал за тебя.

[Brad9aga]

Рустам Байназаров, так выше ж ссылка, ты изменил, я тож с ходу

[Rustam Bainazarov]

Brad9aga, не, я понял, что ссылка поменял выше. Я просто не думал, что ты успел прочитать о моей просьбе.

[maxxim9595]

Спасибо всем!!! Как всегда, все делаю в последний момент...

[Brad9aga]

Рустам Байназаров, ты цитировал мой ник просто ссылкой ?

[Rustam Bainazarov]

Brad9aga, ага, как в комментариях.

[Brad9aga]

Рустам Байназаров, тебе оповещение пришло что я в ответе твой написал

[Rustam Bainazarov]

Brad9aga, ага.

Ты упомянул имя Бога всуе!

[Brad9aga]

Рустам Байназаров, ну и славненько )