1. Главная
  2. Блоги
  3. Блог azzis

Темизация Primary links в Drupal 6

Главные вкладки

Аватар пользователя azzis azzis 20 августа 2009 в 3:10

Долго ломал голову как бы так хитро темизировать Primary links чтобы пункты меню были активными не только когда находишься в той книге на которую ссылается пункт меню, но и еще когда находишься на одной из страниц книги.
Голову чуть не сломал, но решение таки нашлось.

Долго ломал голову как бы так хитро темизировать Primary links чтобы пункты меню были активными не только когда находишься в той книге на которую ссылается пункт меню, но и еще когда находишься на одной из страниц книги.
Голову чуть не сломал, но решение таки нашлось.
Значит так, по порядку. Есть структура:

Hunting
-- Brown bear hunt in Okhotsk region
-- Himalayan bear hunt in Khabarovsk region
-- Snow sheep hunt in Okhotsk region
Fishing
Gallery
Tips
Contacts
Maps
About us
Staff

То есть Hunting - это книга, а следующие по уровню пункты - страницы книги. У книги Hunting, задаем путь /hunting, у страниц книги адреса следующие /hunting/page1..n.

В файле template.php переопределяем функцию вывода primary links следующим образом:

    function main_menu($links, $attributes = array('class' => 'main-menu clearfix')) {
      $output = '';
      //echo krumo($links);
      if (count($links) > 0) {
        $output = '<ul'. drupal_attributes($attributes) .'>';

        $num_links = count($links);
        $i = 1;

        foreach ($links as $key => $link) {
          $class = $key;

          if ($i == 1) {
            $class .= ' first';
          }
          if ($i == $num_links) {
            $class .= ' last';
          }
         
          $class .= ' clearfix';
         
          if (isset($link['href']) &&
             (
               $link['href'] == $_GET['q'] ||
               ($link['href'] == '<front>' && drupal_is_front_page()) ||
               //Ключевой момент определения что материал принадлежит к активной книге
               //Определяется по url линка меню и текущему url.
               stripos(request_uri(), url($link['href'])) !== FALSE
             )) {
            $class .= ' active';
            $output .= '<li'. drupal_attributes(array('class' => $class)) . '>'
              . '<div class="l-t"><div class="r-t"></div><div class="f-t"></div></div>'
              . "<a href='".url($link['href'])."'". drupal_attributes($link['attributes']).">".$link['title']."</a>"
              . '<div class="l-b"><div class="r-b"></div><div class="f-b"></div></div>';
          } else {
             
            $output .= '<li'. drupal_attributes(array('class' => $class)) . '>'
             . "<a href='".url($link['href'])."'". drupal_attributes($link['attributes']).">".$link['title']."</a>";
         
          }

          $i++;
          $output .= "</li>\n";
        }
        $output .= '</ul>';
      }
      return $output;
    }

Ну вот в общем-то и все, осталось вызвать функцию в нужном месте шаблона:

    <?php echo main_menu($primary_links) ?>

Кстати хитрая конструкция из дивов нужна для придания выделенному пункту меню формы с закругленными краями:
Скриншот

При наличии 4 изображений угловых элементов можно использовать следующий css:

ul.main-menu  {
      list-style-image: none;
      list-style-type: none;
      margin:0 0 40px 20px;
    }

    ul.main-menu li {
      _height:1px;
      zoom:1;
      margin:6px 0;
    }

    ul.main-menu li a {
      color: #486d0f;
      font-size:1.2em;
      font-weight:bold;
      padding-left:10px;
    }

    .main-menu li.active a {
      background: #85a008;
      border-left:1px solid #ffc86d;
      border-right:1px solid #ffc86d;
      padding: 0 10px;
      color:#fff;
      text-decoration: none;
      display:block;
    }

    .main-menu li.active {
      margin-top:0;
    }

    .active .l-t {
      background: url('images/left-top.png') top left no-repeat;
      height:7px;
      overflow:hidden;
    }

    .active .r-t {
      background: url('images/right-top.png') top left no-repeat;
      height:7px;
      width:7px;
      float:right;
      overflow:hidden;
      margin-left: -7px;
    }

    .active .f-t {
      height:6px;
      margin:0 7px;
      background: #85a008;
      border-top:1px solid #ffc86d;
      overflow:hidden;
    }

    .active .l-b {
      background: url('images/left-bottom.png') no-repeat;
      height:7px;
      overflow:hidden;
    }

    .active .r-b {
      background: url('images/right-bottom.png') no-repeat;
      height:7px;
      width: 7px;
      overflow:hidden;
      float:right;
      margin-left: -7px;
    }

    .active .f-b {
      height:6px;
      margin:0 7px;
      background: #85a008;
      border-bottom:1px solid #ffc86d;
      overflow:hidden;
    }

Оригинал статьи

Комментарии

Аватар пользователя migen migen 9 января 2011 в 13:28

Отличная статья! Дает ответ на многие вопросы связанные с темизацией меню друпал. Данный метод позволяет настроить меню без лишнего кода.

Аватар пользователя Worth Worth 23 июля 2011 в 7:39

Теперь для решения задачи, с которой столкнулся автор, есть модуль http://drupal.org/project/menu_position
Но статья все равно полезна для тех, кому надо просто темизировать primary links, таких как мне. Спасибо!

Аватар пользователя neorus neorus 22 ноября 2011 в 16:23

У меня такая трабла - класс 'active' присваевается к первому элементу меню всегда, вне зависимости от того, где находится на данный момент пользователь. И получается, что два элемента с классом 'active'. Кто-нибудь сталкивался с этим?