Как скрыть/показать меню?

Question

[Вячеслав Боргомотов]

Добрый день.

Помогите сделать меню. Нужно:
1. по клику на "меню" плавно появлялось меню с левого бока
2. клик по "меню" плавно скрыть меню
3. клик в не меню - плавно скрыть меню.

jsfiddle.net

Заранее спасибо

Answer 1

[Евгений]

посмотри сайт qyooe.com
Если такое решение устраивает то поделюсь кодом...

Пользовался этим:
https://daneden.github.io/animate.css/

Comments

[Вячеслав Боргомотов]

Очень красиво, но не то что мне нужно. Спасибо

[Евгений]

А что конкретно требуется? Клик за пределами меню легко добавить через прозрачную подложку указав Z-index

[Вячеслав Боргомотов]

Список скрыт. По клику на меню показать список. Клик по меню/по пустому месту - список скрывается

[Евгений]

Скачиваешь с предыдущей ссылки файл animate.css на GitHub
Затем подключаешь его в шапке

остальное настраиваешь под себя и вставляешь в нужные места

(JavaScript)

(HTML)

Список меню

(CSS)
#padding {
width: 100%;
height: 100%;
display: none;
Z-index: 500;
position: fixed;
}
#menu {
width: величина px;
height: величина px;
top: величина px;
left: 0 px;
Z-index: 1000;
position: absolute;
display: none;
}
#button_menu_open{
твои параметры кнопки;
position: absolute;
display: block;
Z-index: 2000;
}
#button_menu_close{
твои параметры кнопки;
position: absolute;
display: none;
Z-index: 2000;
}

[Евгений]

(JavaScript)
//function open_menu() {
//$('#padding').css('display','block').show(0);
//$('#button_menu_open').css('display','none');
//$('#button_menu_close').css('display','block');
//$('#menu').removeClass('animated slideOutLeft').addClass('animated slideInLeft').show(0);
};

//function close_menu() {
//$('#padding').css('display','none');
//$('#button_menu_open').css('display','block');
//$('#button_menu_close').css('display','none');
//$('#menu').removeClass('animated slideInLeft').addClass('animated slideOutLeft');
};

[Евгений]

(HTML)
id="button_menu_open" onClick="open_menu()"
id="button_menu_close" onClick="close_menu()"
id="padding" onClick="close_menu()"
id="menu"

[Евгений]

Удачи!

Answer 2

[Web Developer Blog]

Огоромное колличество JS плагинов для этого

Comments

[dm]

После такого ответа автор вопроса уже мчится на ваш канал youtube. )