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

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

Прислано: azzis

ср, 19/08/2009 - 23:10

Другие статьи по теме:

Долго ломал голову как бы так хитро темизировать 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;
    }

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

azzis's blog
Для комментирования войдите или зарегистрируйтесь

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"

Опубликовано alexandr.poddubsky в чт, 20/08/2009 - 01:01.

плохая конструкция- советую прочесть про спрайты.

Для комментирования войдите или зарегистрируйтесь

Опубликовано azzis в пт, 21/08/2009 - 13:38.

Кхе-кхе, мсье, может подскажете из какой это области и где прочесть?

Для комментирования войдите или зарегистрируйтесь

Опубликовано kirbaranov в сб, 09/01/2010 - 20:44.

Видео (Про спрайты во второй части):
http://pepelsbey.net/2009/02/with-knife-against-train/

В картинках:
http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

Для комментирования войдите или зарегистрируйтесь

Опубликовано migen в вс, 09/01/2011 - 10:28.

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

Для комментирования войдите или зарегистрируйтесь

Опубликовано mamba в ср, 16/03/2011 - 13:05.

azzis, почему тег title в атрибуте A всегда пустой. Как исправить?

Для комментирования войдите или зарегистрируйтесь

Опубликовано Worth в сб, 23/07/2011 - 03:39.

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

Для комментирования войдите или зарегистрируйтесь

Опубликовано neorus в вт, 22/11/2011 - 12:23.

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