Как сделать выдвигающееся меню слева/справа?

Question

[Санан :з]

Привет!
Мне нужно сделать меню, как тут www.kakao.com/main



Нюанс данной задачи таков, что используется бутстрап, и если пользователь с десктопа - эти меню раскрыты в таком же виде, а кнопки, их открывающие - скрыты. С мобильника/планшета - их(менюшек) не видно, есть кнопочки - которые должны открывать соответствующее меню.
Как это реализовать?

Answer 1

[mr_dev1l]

Обычной проверкой:

<nav id="menu">
<li>меню</li>
<li>меню</li>
<li>меню</li>
</nav>
<nav id="mobile-menu">
<li>меню</li>
<li>меню</li>
<li>меню</li>
</nav>

#mobile-menu {
 display:none;
}

var dispayWidth=$(window).width();
if (dispayWidth < 768) {
 $("#mobile-menu").css("display", "block");
 $("#menu").css("display", "none");
}
else {
 $("#mobile-menu").css("display", "none");
 $("#menu").css("display", "block");
}

Comments

[Санан :з]

я видимо не так выразился - нужно чтобы они открывались при нажатии на кнопку, как на сайте www.kakao.com/main . Это первый момент. Второй - они автоматически скрываются при посещении с телефона, и отображаются с десктопа при помощи bootstap классов col-sm-*

[Санан :з]

mr_dev1l, а вообще идеальный пример чего я хочу - тостер - тут сева панелька, котрая на десктопе отображается, а на мобиле жмешь бургер - и оно вылезает.

[Санан :з]

слева*