Как разместить кнопку выезжающего вертикального меню?

Question

[Александр]

Здравствуйте, уважаемые программисты! Назрел вопрос.
Есть бокове выезжающее/уезжающее по клику меню (просто меняется значение на смещение за пределы области видимости, а не прячется за счет display). Само меню имеет в стилях position:fixed
Я хотел в него вложить блок с position:absolute со смещением, чтобы кнопка открытия/скрытия меню как бы была "прикреплена" к меню и всегда была частично доступна. Сейчас на скриншоте видно левую часть кнопки, а мне надо наоборот, левую часть скрыть, а правую видеть за пределами меню. Т.е меню уехало, а часть кнопки видно сбоку, чтобы на неё можно было нажать и открыть меню снова.
Я так понял не получится разместить в элементе с fixed элемент с absolute? Чтобы он мог выходить за пределы fixed и не обрезаться его размерами?

Answer 1

[Сергей c0re]

Кнопку можно вынести за nav
На кнопку необходимо поставить стили:
position: fixed;
top: 25px;
left: 225px;
...
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;

и убрать margin

сделать дополнительный переключаемый класс для кнопки с left: 25px

.menuButtonShift {
left: 5px;
}

и добавлять/удалять этот класс на кнопку по клику.

как-то так:



Upd:

вот примеры других меню и без использования JQuery, который тут и не нужен.


а это вообще без использования JS, на Pure CSS

Comments

[Александр]

Сергей, спасибо! Первый вариант то что надо. Сам об этом уже вчера подумал. Но спасибо еще раз за помощь!

Answer 2

[Борис Шепелев]

Все получиться:) Вот живой пример: https://smartseotech.ru/ Я делал. Если что пиши - помогу