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

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

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

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

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


Еще подумал, что когда пунктов подменю мало, можно автоматом сокращать количество колонок, чтоб во всех колонках, кроме последней было не менее пяти, например, пунктов. Т.е. если пунктов всего 12, то меню должно быть 3-х колоночное, а если 8, то двухколоночное. Тоже можно считать на лету и подставлять соответствующие классы spanX.

Получилась вот такая верстка

И вот такие стили

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

На самом деле исходный код взял здесь, и совсем немного его подправил.

Автор

Сергей Родовниченко

Родился, учился, работал и все такое. Занимаюсь поддержкой сайтов на Shop-Script, Joomla, Wordpress, Prestashop. А также на самописных движках на базе CakePHP.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *