Положу опять здесь, чтобы не потерять. Верстка, код и CSS для организации бокового меню, которое на маленьких экранах выезжает слева, сдвигая основной контент. Ну, «в стиле iOS». В отличие от предыдущего уже скрещено с Bootstrap 3.
JS Bin
Рубрика: Верстка
Сдвигающееся меню в стиле iOS
Просто положу это здесь. Должно пригодиться.
See the Pen iOS style sliding menu by Jason Howmans (@jasonhowmans) on CodePen.
CSS3 text-shadow
Поигрался немного с правилом text-shadow. На Internet Explorer работать, наверное, не будет. Но кого волнует чужое горе?
При радиусе размытия 0 делает просто внешнюю обводку. На Firefox 26, правда, при смещении на 1px по обеим осям углы не очень четко обозначает.
Chosen: работа над SELECT’ами
Chosen оказалось очень неплохим решением для различных выпадающих SELECT’ов. Правда, множественный выбор как был неочевидным, так и остался — приходится в подсказках все равно писать что-то типа «можно выбрать несколько вариантов».
С Twitter Bootstrap вполне себе скрещивается. Есть даже Helper для CakePHP, но я его еще попробовать не успел.
Многоколоночное выпадающее меню в Bootstrap
Понравилось мне, как в стандартном шаблоне Opencart сделано двухуровневое меню категорий товаров.
Для Shop-Script, в принципе, можно выдернуть необходимые данные но вот мне сейчас очень по душе фреймворк Twitter Bootstrap. Поэтому захотелось заверстать похожее меню под него. Немного погуглил, немного подправил результат. В Opencart можно задавать количество колонок. У меня получилось, что это количество задано в шаблоне и вообще не может быть больше 12-ти, но это не страшно. Во-первых на лету пересчитывать в зависимости от количества колонок все-таки можно, если очень захочется, а во-вторых что-то мне подсказывает, что больше пяти это все равно будет плохо смотреться.
Почему не выдрал просто код из OpenCart? Тамошее меню страдает, на мой взгляд, огромным недостатком — оно раскрывается при наведении на него курсором, а при клике переходит в категорию первого уровня. На десктопе это, может, и выглядит круто, хотя мне не нравится, когда что-то прыгает и дергается на экране, когда я мышкой двигаю. Но на планшете, например, это просто смертельно — пункты подменю получаются вообще недоступны. Поэтому мне больше нравится решение из Bootstrap — пункт меню, раскрывающийся при клике на нем.