DrupalBook.org.ua
Готовые решения для сайта на Drupal.Использование сниппетов для построения разделенного многоуровневого меню
Задача:
- Разделение расположения основных и второстепенных разделов меню.
- Второстепенные разделы показываются только при выборе одного из основных.
- Выделение активным классом всех родительских пунктов на всех уровнях.
- Возможность вывода дерева меню (много уровней) в подразделах (чего нельзя добиться при использовании secondary_links)
перевозка тракторов
Решение:
- Перейти: Админка → Конструкция → Меню
- Создать меню (можно создать необходимые пункты прямо в primary links - меню уже создано по умолчанию). Чтобы сделать его многоуровневым, выбирайте у пунктов родителя. Не нужно создавать 2 отдельных меню.
- Зайти на вкладку Настройки - выбрать:
Меню, содержащее основные ссылки: ваше меню (Primary links)
Меню, содержащее дополнительные ссылки: нет дополнительных ссылок. - Написать в нужном месте в page.tpl.php такой код:
Для primary_links
<?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links) ?><?php } ?> - Расположим слева в page.tpl.php левую колонку:
<?php if ($sidebar_left) { ?><?php print $sidebar_left ?><?php } ?> - Создадим блок в админке и поместим туда вот такой PHP код (источник):
<?php
$primary_menu_id = variable_get('menu_primary_menu', 0);
if (menu_in_active_trail($primary_menu_id)){
// get the menu items that lead to the current menu item
$active_trail =_menu_get_active_trail();
// get the menu id of the active top-level link
$mid = $active_trail[1];
$menu_item = menu_get_item($mid);
$menu_tree = menu_tree($mid);
print '<ul class="ВАШ КЛАСС ДЛЯ ЛЕВОГО МЕНЮ">'.$menu_tree.'</ul>';
}
?> - Для того чтобы сделать родительскую ссылку с class="active", воспользуемся TemplatePHP сниппетом с этой страницы. Вставляем в template.php данный код (без закрывающего
?>).
<?php
function phptemplate_links($links, $attributes = array()) {
if (!count($links)) {
return '';
}
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "<ul class=\"links-$level ".$attributes['class']. "\">\n";
foreach ($links as $index => $link) {
$output .= '<li';
if (stristr($index, 'active')) {
$output .= ' class="active"';
}// frontpage AND current-link in menu is <front>
elseif((drupal_is_front_page()) && ($link['href']=='<front>')){
$link['attributes']['class'] = 'active';//add class active to <li
$output .= ' class="active"';//add class active to <a
}
$output .= ">". l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']) ."</li>\n";
}
$output .= '</ul>';
return $output;
}
?> - Теперь сделаем так, чтобы все родительские ссылки имели вид как у ссылки с class="active", решим эту проблему с помощью CSS.
Такое меню генерирует код из блока.
<ul class="sbtree">
<li class="leaf"><a href="/Company_History">Company History</a></li>
<li class="expanded"><a href="/Business_Units">Business Units</a>
<ul class="menu">
<li class="expanded"><a href="/Property_Development">Property Development</a>
<ul class="menu">
<li class="leaf"><a href="/board_committees" class="active">Board Committees</a></li >
<li class="leaf"><a href="/Rules_of_Procedure">Rules of Procedure</a></li>
</ul>
</li>
<li class="leaf"><a href="/Real_Estate_Funds">Real Estate Funds</a></li>
<li class="leaf"><a href="/Russia">Russia</a></li>
</ul>
</li>
<li class="leaf"><a href="/Corporate_Governance">Corporate Governance</a></li>
</ul>
Такие классы меню нужны, чтобы полностью проследить 4 уровня вложенного меню.ul.sbtree li a.active - просто активное меню второго уровня
ul.sbtree li.expanded a - родительский пункт развернутого меню, содержащего активный пункт - хотим чтобы он был как активный
ul.sbtree li.expanded ul.menu li a - дочерний неактивный пункт меню третьего уровня - хотим чтобы он был как неактивный
ul.sbtree li ul.menu li a.active - дочерний активный пункт меню третьего уровня
ul.sbtree li.expanded ul.menu li.expanded a - родительский пункт развернутого меню в развернутом меню - хотим чтобы он был как активный
ul.sbtree li.expanded ul.menu li.expanded ul.menu a - дочерний неактивный пункт развернутого меню в развернутом меню - хотим чтобы он был как неактивный
ul.sbtree li.expanded ul.menu li.expanded ul.menu a.active - - дочерний активный пункт меню четвертого уровня
Использованные материалы:
- Страница для печати
- 145 reads
Creative Commons: Attribution-Share Alike 2.5
Данные материалы выложены под лицензией Creative Commons: Attribution-Share Alike 2.5. Это значит, что вы можете распространять, копировать и модифицировать эти произведения при условии упоминания авторства оригинала, и при условии, что они также будут распространяться на условиях этой лицензии (то есть, изменённую работу нельзя защитить копирайтом). Подробнее смотри: http://ru.wikipedia.org/wiki/Creative_Commons