Как реализовать выездной sidebar?

Question

[Semmy_99]

Ребят,подскажите пожалуйста как реализовать выездной сайдбар?
Как на картинке.
При клике на пирожок,выезжает темно синий блок и сдвигает светло-синий вправо.При повторном клике сайтбар просто уезжает за экран.

Может есть какие-либо примеры реализации или может подскажите в каком направлении рыть ?

Answer 1

[Ankhena]

Просто при клике синему блоку задаете класс, который меняет ширину. Либо просто меняете ширину. Голубому, при необходимости, ширину уменьшаете (зависит от верстки, что там у вас, флоаты, флексы и т.д.).

Comments

[Semmy_99]

Посмотрите пожалуйста пример codepen.io/anon/pen/MpgobE .

При клике добавляется класс,один выдвигается + др уходит правее и тем самым появляется эффект выдвижного сб.
Но при повторном клике ничего не происходит,как ни странно,а как сделать чтобы при повторном клике красный блок задвигался + остальные сдвигались влево и как добавить анимацию для серого блока ?

[Ankhena]

Semmy_99: используйте toggleClass, он будет их чередовать при клике