Подскажите, как нужно модифицировать модуль the1988net Catalog tabs, чтоб он работал как сейчас на aquaria.net.ua. Интересно именно выпадание diva с категориями 2го и 3го уровня вложенности при клике на родительскую категорию (а еще лучше при наведении мышью).
Очень модное нынче меню для больших каталогов. А ля розетка.
Меню а ля розетка. Юзайте модуль categories.htm. Поможет корневые категории побить на строки. Типа меню, под ним еще строка меню, под ним еще строка и т.д. Числом категорий в строке меню управляет параметр listing_separator_capacity. Listing_separator разметку как закрыть верхнюю строку и открыть следующую.
Вложенные категории поможет побить на колонки псевдо таблицы. Числом подкатегорий в колонке управляет sublisting_separator_capacity. Sublisting_separator содержит разметку как закрыть колонку слева и открыть следующую справа.
{include file = '../../common_parts/AIMatrix/categories.htm'
items = $categories|default:false
namepath = ''
maxlevel = 2
maxcount = 256
filter = []
opentag = '<div id="categories">'
box_opentag = ''
listing_opentag = '<div class="row">
<ul>'
link_opentag = '<li>'
a_id = ''
a_class = ''
a_active_class = 'active'
a_highlighted_class = 'highlight'
a_target = ''
a_text_maxsize = 256
a_text_top_maxsize = 256
sublisting_opentag = '<div class="table">
<div class="column">
<ul>'
sublink_opentag = '<li>'
sublink_closetag = '</li>'
sublisting_separator_capacity = 15
sublisting_separator = '</ul>
</div>
<div class="column">
<ul>'
sublisting_closetag = '</ul>
</div>
</div>'
link_closetag = '</li>'
listing_separator_capacity = 7
listing_separator = '</ul>
</div>
<div class="row">
<ul>'
listing_closetag = '</ul>
</div>'
box_closetag = ''
closetag = '</div>'}
Если меню бить на строки не нужно, то listing_separator = '' и все.
Стили колонок пример
/* сброс */ #categories * { box-sizing: border-box; margin: 0; padding: 0; position: relative; } /* категории в строку */ #categories li { display: block; float: left; line-height: 40px; padding: 0 10px; } /* подкатегории построчно */ #categories .table li { float: none; line-height: normal; padding: 0; } /* псевдо таблицы */ #categories .table { display: none; left: 0; position: absolute; width: 1200px; } /* таблицы появляются под мышью */ #categories li:hover .table { display: block; } /* колонки */ #categories .column { float: left; padding: 10px; width: 200px; } /* колонки разделим полосой */ #categories .column + .column { border-left: 1px solid silver; } /* активная категория */ #categories .active { color: red; } /* подсвеченная категория */ #categories .highlight { background: lime; }
Короче стилист настроит если что.
OK. Спасибо что выровняли. То боялся код криво выглядеть будет. На форуме очень плохо устроено редактирование сырцов. Только html кнопкой нормально можно сделать и руками много копипастить нужно.
Хотел еще раскрасить не нашел где это делается.
Раскрасил. Цветами попытался выделить уровни так, чтобы люди поняли, как (из каких тегов) формируется конечная разметка меню категорий согласно иерархии.
Спасибо вам за подготовку хорошего примера.
Кстати, у Розетки maxlevel = 3, но тогда стилисту придется доделать стили для #categories .table .table, чтобы категории третьего уровня вложенности были списком, но не колонками.
И кстати еще, на третий уровень невозможно задать другой sublisting_separator_capacity, тоже будет разделять по 15 штук в "колонке". Просто колонки здесь будут (должны быть) стилями "склеены" в один список.
Спасибо.
По третьему уровню ну и что стоит ограничить длину списка с помощью css? Например не более 7 категорий.
/* убираем абсолютные позиции с таблиц */
#categories .table .table {
position: relative;
width: auto;
}
/* колонки не плавают */
#categories .table .table .column {
float: none;
width: auto;
}
/* видна только первая колонка */
#categories .table .table .column + .column {
display: none;
}
/* категории от 8 и далее скрываем */
#categories .table .table .column > li + li + li + li + li + li + li + li {
display: none;
}
Ребята, я просто удивлен! Огромное спасибо за готовое решение. Нигде я не встречал подобной поддержки!
Осталось стили нарисовать. Дело для меня не сложное.
Сказка!
В этом и фигня Имперы. Они нахаляву раздают готовые решения. Поэтому с ними не работает ни один фрилансер. Где уж тут заработать?
Меню в стиле розетки как пить дать от 70$ сверстать стоит. Ан нет слили тему даром.
# Александр
# как пить дать от 70$ сверстать стоит. Ан нет слили тему даром.
Ну не хотят работать и не надо. Хороший заказчик всегда заплатит за работу. А фрилансеру, выжидающему момент и потому не озвучивающему цену да желание сделать, наверно остается мусолить о паленой теме.
# Андрей
# Поможет корневые категории побить на строки. Типа меню, под ним еще строка меню, под ним еще строка и т.д.
А что это за меню такое, побитое на строки? Пример в студию.
Смотри какой умный. Я первый раз здесь что ли? Хоть озвучивай хоть польку спляши. Следом всё равно появится перл какого-нибудь идиота альтруиста. И все озвучки накроются тазом.
Барбус, вы просили пример - 100bud.com - смотрите, 12 корневых категорий выставлены в 3 строки по 4 категории в каждой. Здесь было использовано listing_separator_capacity = 4. Параметр sublisting_separator был равен пустой строке, так как не стояла задача деления вложенных ветвей на части (колонки). Также использовался параметр maxlevel = 3, чтобы вывести меню категорий не глубже третьего уровня.
Максим, всегда пожалуйста. Будут еще вопросы - обращайтесь.
Андрею еще раз спасибо за хороший пример и подсказки по CSS.
В итоге сделал отдельный горизонтальный блок с выводом ссылок на категории 1го уровня и подключил к ним отдельные выводы категорий 2го и 3го уровня с применением отдельных стилей к каждому из них. Причина - например крайнее правое выпадающее меню уезжает за границы окна. Таким образом отдельными стилями получил возможность смещать и отдельно настраивать вывод каждого выпадающего списка. Кстати на том же 100bud.com присутствует эта проблема. Крайнее правое нижнее меню при выпадании уезжает за пределы окна.
Сделал нечто похожее на мегаменю только с помощью CSS, используя стандартный вывод категорий из шаблона (без подключения модулей из common_parts).
Теперь при наведении курсора на верхний уровень меню (который виден всегда), появляется слой, в котором отображаются все подкатегории в виде дерева.
Но столкнулся с тем, что при переходе в любую подкатегорию, ей назначается класс "selected" который выделяет ее цветом, а родительская категория верхнего уровня, теряет этот класс. В результате, не видно в какой категории находишься.
Подскажите, плиз, как можно модифицировать код вывода категорий, чтобы класс "selected" назначался сразу двум элементам списка: текущему и его родителю верхнего уровня?
Вот мой код:
<!-- Меню каталога ==============================================/ -->
<div id="catalog_menu">
{strip}
{* <!-- если есть массив категорий --> *}
{if !empty($categories)}
{* <!-- объявляем функцию вывода дерева категорий --> *}
{function name="categories_tree"}
<ul class="topnav">
{foreach $categories as $c}
{* <!-- если непустая или в настройках разрешено показывать и пустые --> *}
{if !empty($c->products_count) || empty($settings->catalog_menu_noempty)}
{* <!-- если разрешена и не закрыта от чужих или это авторизованный пользователь --> *}
{if !empty($c->enabled) && (empty($c->hidden) || !empty($user->user_id))}
<li>
{if !empty($c->image)}
<img src="{$c->image|escape}" alt="{$c->name|default:''|escape}">
{/if}
{* <!-- ссылка (категория может быть выделена в админке) --> *}
<a {if !empty($c->highlighted) && ($category->category_id|default:0 == $c->category_id|default:'')}
class="selected highlighted"
{elseif !empty($c->highlighted)}
class="highlighted"
{elseif $category->category_id|default:0 == $c->category_id|default:''}
class="selected"
{/if} href="{$site}{$c->url_path}{$c->url}" {if $smarty.session.admin|default:"" == "admin"}
{if !empty($settings->catalog_menu_adminedit)}
tooltip="category" category_id="{$c->category_id}"
{/if}
{/if}>
{$c->name|default:'Без названия!'}
</a>
{* <!-- если имеет вложенные категории --> *}
{if !empty($c->subcategories)}
{categories_tree categories = $c->subcategories}
{/if}
</li>
{/if}
{/if}
{/foreach}
</ul>
{/function}
{* <!-- вызываем функцию вывода дерева категорий --> *}
{categories_tree categories = $categories}
{/if}
{/strip}
</div>
Подскажите пожалуйста как сделать меню что бы категории были активны как здесь cop.com.ua/catalog/Videoregistratory-i-platy т.е. не постоянно все раскрыты а только раскрыта основная подкатегория
Извинияюсь что спамлю, подскажите как сделать такое же меню слева в колонке (с минусами разварачивающимися в заголовке) ??? aquaria.net.ua/morskaya-akvariumistika/morskaya-sol
Меню плюс-минусом В стандартный код вывода дерева категорий над рекурсивной прорисовкой вложенных категорий добавляем кликабельные якоря (теги <a class="switch plus" onclick=""></a>), на них вешаем некий скрипт switchBranch, скрывающий-открывающий ul контейнер категории, ближайшей к этому якорю. В дополнительных стилях все ul контейнеры вложенных категорий по умолчанию делаем скрытыми и стилизуем кнопочку якоря, чтобы смотрелась как нам нужно.
Пример кода дерева категорий с внесенными изменениями:
<div id="categories">
{function name = 'categoriesTree'}
<ul>
{foreach $cats as $item}
<li>
<a href="{$site}{$item->url_path}{$item->url}">
{$item->name}
</a>
{if !empty($item->subcategories)}
<a class="switch plus" onclick="return switchBranch(this)"></a>
{categoriesTree cats = $item->subcategories}
{/if}
</li>
{/foreach}
</ul>
{/function}
{categoriesTree cats = $categories}
</div>
Теперь скрипт отработки кликов по якорю "плюс-минус".
<script type="text/javascript">
function switchBranch ( el ) {
if (jQuery(el).hasClass('plus')) {
jQuery(el).removeClass('plus').next('ul').first().show();
} else {
jQuery(el).addClass('plus').next('ul').first().hide();
}
return false;
}
</script>
Теперь дополнительные стили. Здесь кнопку делаем за счет текстовых символов + и -.
<style type="text/css">
/* кнопка "плюс-минус" */
#categories .switch {
background: #eee;
color: #080;
content: '-';
display: block;
float: right;
margin: 0 0 0 5px;
padding: 0;
line-height: 20px;
height: 20px;
width: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
/* кнопка когда в состоянии "плюс" */
#categories .switch.plus {
background: #eee;
color: #800;
content: '+';
}
/* по умолчанию вложенные категории скрыты */
#categories ul ul {
display: none;
}
</style>
Если можете нарисовать иконки размером 20x20 пикселей, тогда дополнительные стили будут такими:
<style type="text/css">
/* кнопка "плюс-минус" */
#categories .switch {
background: transparent url('../images/switch-minus.png') center center no-repeat;
display: block;
float: right;
margin: 0 0 0 5px;
padding: 0;
height: 20px;
width: 20px;
text-decoration: none;
cursor: pointer;
}
/* кнопка когда в состоянии "плюс" */
#categories .switch.plus {
background: transparent url('../images/switch-plus.png') center center no-repeat;
}
/* по умолчанию вложенные категории скрыты */
#categories ul ul {
display: none;
}
</style>
Если "плюс-минус" должен быть только на самых верхних категориях, тогда добавим стиль:
<style type="text/css">
/* скрываем кнопки подкатегорий */
#categories ul ul .switch {
display: none;
}
</style>
Или в коде вывода дерева категорий сделать вывод кнопок только для категорий верхнего уровня, для чего в функция вывода ввести контрольный параметр например level. Тогда код станет таким:
<div id="categories">
{function name = 'categoriesTree' level = 1}
<ul>
{foreach $cats as $item}
<li>
<a href="{$site}{$item->url_path}{$item->url}">
{$item->name}
</a>
{if !empty($item->subcategories)}
{if $level == 1}
<a class="switch plus" onclick="return switchBranch(this)"></a>
{/if}
{categoriesTree cats = $item->subcategories level = $level + 1}
{/if}
</li>
{/foreach}
</ul>
{/function}
{categoriesTree cats = $categories}
</div>