Понравилось мне, как в стандартном шаблоне Opencart сделано двухуровневое меню категорий товаров.
Для Shop-Script, в принципе, можно выдернуть необходимые данные но вот мне сейчас очень по душе фреймворк Twitter Bootstrap. Поэтому захотелось заверстать похожее меню под него. Немного погуглил, немного подправил результат. В Opencart можно задавать количество колонок. У меня получилось, что это количество задано в шаблоне и вообще не может быть больше 12-ти, но это не страшно. Во-первых на лету пересчитывать в зависимости от количества колонок все-таки можно, если очень захочется, а во-вторых что-то мне подсказывает, что больше пяти это все равно будет плохо смотреться.
Почему не выдрал просто код из OpenCart? Тамошее меню страдает, на мой взгляд, огромным недостатком — оно раскрывается при наведении на него курсором, а при клике переходит в категорию первого уровня. На десктопе это, может, и выглядит круто, хотя мне не нравится, когда что-то прыгает и дергается на экране, когда я мышкой двигаю. Но на планшете, например, это просто смертельно — пункты подменю получаются вообще недоступны. Поэтому мне больше нравится решение из Bootstrap — пункт меню, раскрывающийся при клике на нем.
Еще подумал, что когда пунктов подменю мало, можно автоматом сокращать количество колонок, чтоб во всех колонках, кроме последней было не менее пяти, например, пунктов. Т.е. если пунктов всего 12, то меню должно быть 3-х колоночное, а если 8, то двухколоночное. Тоже можно считать на лету и подставлять соответствующие классы spanX.
Получилась вот такая верстка
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<div class="navbar"> <div class="navbar-inner"> <ul class="nav" id="top-menu"> <li><a href="#">Top menu item without dropdown</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Top menu item with dropdown <b class="caret"></b> </a> <ul class="dropdown-menu span10"> <li class="column-menu span2"> <ul> <li><a href="#">Item1</a></li> <li>Item2</li> <li>Item3</li> </ul> </li> <li class="column-menu span2"> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="column-menu span2"> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="column-menu span2"> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> <li class="column-menu span2"> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul> </li> </ul> </li> </ul> </div> </div> |
И вот такие стили
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.navbar .dropdown-menu > li.column-menu ul { display: inline-block; list-style: none outside none; margin: 0 0 16px; width: 100%; } .navbar .dropdown-menu > li.column-menu li { display: inline; float: left; width: 100%; padding-left: 1em; } .navbar .dropdown-menu > li.column-menu:first-child { margin-left: 0; } |
Осталось немного поработать со ссылками, если надо и все будет отлично. Хорошо бы еще, чтоб колонки были разной ширины, в зависимости от контента, но это уже совсем другая история.
На самом деле исходный код взял здесь, и совсем немного его подправил.
