Как сделать данный код рабочим?

Question

[Conover]

Вот сам проектcodepen.io/anon/pen/PPegLx и его код, но при top:-100% не нажимается кнопка и не получается того самого выдвижного меню, а если убрать top:-100%, то боковое меню находиться ниже, но работает.Как это исправить?

Comments

[Николай]

О какой кнопке речь ?)

[Conover]

Николай: codepen.io/anon/pen/PPegLx вот здесь четко видно кнопку, которая должна сдвигать панель меню вправо, помогите

[Conover]

Николай: Спасибо, но как сделать, что само меню было на уровне с кнопкой, а то оно находится ниже

Answer 1

[Николай]

У вас есть код, отвечающий за событие клика - вот он:

$('[data-toggle]').click(function () {
        var toggle_el = $(this).data('toggle');
        $(toggle_el).toggleClass('open-sidebar');
    });

Он для всех элементов, содержащих аттрибут data-toggle добавляет обработчик события click, в котором ищется элемент, определяемый селектором указанным в значении атрибута. И затем этому объекту добавляется или убирается класс. Для того, чтобы у вас всё работало надо добавить в html коде аттрибут data-toggle со значением .container.
Вот так:

<div class='description' data-toggle='.container'>
</div>

Вообще не очень понятно, зачем вам такая сложная система для определения элемента, который нужно сворачивать/разворачивать.

Comments

[Conover]

healqq: Спасибо, заработало!Но появилась проблема, не показывает содержимого меню((

[Conover]

healqq: Точнее содержимое находится снизу

[Николай]

хм, у меня в вашем последнем pen'e всё нормально. Можете обновить pen?

[Conover]

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

[Николай]

Вариантов довольно много, зависит от того, как выхотите это видеть: если так, чтобы контейнер с картой сжимался - можно вешать класс и на контейнер с картой, который будет задавать например маржин слева. Если вы хотите показывать меню сверху - надо задать блоку position: absolute или position:fixed. Это вопрос верстки и css по большей части.

[Conover]

Николай: Николай: можно еще вопрос. Решил запилить меню к другой анимации, но столкнулся с проблемой, меню как-то неправильно размещено, как это можно разрешить?codepen.io/anon/pen/RWJwoP