Боковое меню для маленьких экранов

Положу опять здесь, чтобы не потерять. Верстка, код и CSS для организации бокового меню, которое на маленьких экранах выезжает слева, сдвигая основной контент. Ну, «в стиле iOS». В отличие от предыдущего уже скрещено с Bootstrap 3.
JS Bin

Многоколоночное выпадающее меню в Bootstrap

Понравилось мне, как в стандартном шаблоне Opencart сделано двухуровневое меню категорий товаров.

Картинка кликабельна
Картинка кликабельна

Для Shop-Script, в принципе, можно выдернуть необходимые данные но вот мне сейчас очень по душе фреймворк Twitter Bootstrap. Поэтому захотелось заверстать похожее меню под него. Немного погуглил, немного подправил результат. В Opencart можно задавать количество колонок. У меня получилось, что это количество задано в шаблоне и вообще не может быть больше 12-ти, но это не страшно. Во-первых на лету пересчитывать в зависимости от количества колонок все-таки можно, если очень захочется, а во-вторых что-то мне подсказывает, что больше пяти это все равно будет плохо смотреться.

Почему не выдрал просто код из OpenCart? Тамошее меню страдает, на мой взгляд, огромным недостатком — оно раскрывается при наведении на него курсором, а при клике переходит в категорию первого уровня. На десктопе это, может, и выглядит круто, хотя мне не нравится, когда что-то прыгает и дергается на экране, когда я мышкой двигаю. Но на планшете, например, это просто смертельно — пункты подменю получаются вообще недоступны. Поэтому мне больше нравится решение из Bootstrap — пункт меню, раскрывающийся при клике на нем.

Читать далее Многоколоночное выпадающее меню в Bootstrap