Насколько адекватно данное решение?

Question

[Никита]

Добрый день!
На днях нужно было сделать адаптивное меню для мобильных и я вспомнил, что где-то видел крутое решение, но так его и не смог найти повторно=(
Наклепал демку, но мне кажется, что есть более простое решение реализации db-mb.ru/burger .
Посмотрите пожалуйста, может быть кто-то уже видел данное меню и вы сможете поделиться ссылкой=)
Так же есть вопрос, почему transition не проигрывается при загрузки страницы, только при повторном клике.
Писал демку для себя, поэтому не кроссбраузерно=( Писал для хрома.
Всем заранее спасибо!

Answer 1

[Murat Atila]

По поводу transition, просто к .content добавьте left, top.
А вообще, вешать анимацию на top/left/right/bottom не хорошо, используйте transform:translate, жрёт гораздо меньше ресурсов браузера и не придётся юзать position: fixed

Comments

[Murat Atila]

Я бы на вашем месте сделал класс который бы навешивал на body, а для него в css каскадом переопределил нужные свойства, тогда ваш js сократился бы до одной строчки

$('body').toggleClass('animated');

плюс вы пишите
$(".toggleMenu").css("left", "30px");
$(".toggleMenu").css("top", "30px");
$(".toggleMenu").css("background", "#FFA000");
$(".content").css("left","300px");
$(".content").css("top","70px");
$(".sw").css("transform","rotate(90deg)");

Если вы обращаетесь к дом элементам столько раз, стоит завести переменные, плюс немного оптимизировать код, такой записью:

$(".toggleMenu").css({"top": "30px", "background": "#FFA000" })

[Никита]

Спасибо!

[Никита]

Murat Atila: jquery и js в целом только недавно начал изучать, спасибо большое!

Answer 2

[Ivan]

Очень похоже на Sidr я им лично пользовался в паре проектов.

Comments

[Никита]

Тут смысл в том, что страница съезжает еще и вниз, а не только направо. + к этому, в каком месте бы ты страницы не находился, будет иллюзия того, что вся страница уезжает=)

[Ivan]

dbmb: я обратил внимание что оно еще и вниз съезжает, думаю сидр можно адаптировать под такой сценарий. Однако "меню для мобильных" - вы уверены, что оно будет адекватно отображаться?