Темизация только Primary-links (span в li)

Опубликовано Dark в СБ, 11.12.2010 - 01:06

Задача вывести меню со следующими особенностями:

вставить span внутрь li, чтобы вставить иконку
переопределять hover определенным образом
разные стили в зависимости от языка сайта

Причем темизировать нужно было только $primary_links, но разные phptemplate_links и theme_links влияют на вывод ссылок всех меню, поэтому решил выводить отдельной функцией.

<ul id="navlist" class="links">
<li class="first">
  <span>
    <span class="cycles"><a href="#">Велосипеды</a></span>
  </span>
</li>
<li>
  <span>
    <span class="skates"><a href="#">Скейты</a></span>
  </span>
</li>
<li class="last">
  <span>
    <span class="ski"><a href="#">Коньки</a></span>
  </span>
</li>
</ul>

Сам вывод состоял из написания функции и вызова ее в page.tpl.php

<?php
function my_theme_primary_menu_links($links, $attributes = array('class' => 'links')) {
  global $language;
  $output = '';
 
  if (count($links) > 0) {
    $output = "<div class='".$language->language."'>"; //для разных языков враппер с классом текущего языка
    $output .= '<ul' . drupal_attributes($attributes) . '>';
 
    $num_links = count($links);
    $i = 1;
 
    foreach ($links as $key => $link) {
      $class = $key;
 
      // Добавление классов first, last, active
      if ($i == 1) {
        $class .= ' first';
      }
      if ($i == $num_links) {
        $class .= ' last';
      }
      if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page()))
           && (empty($link['language']) || $link['language']->language == $language->language)) {
        $class .= ' active';
      }
      $span_class = drupal_get_path_alias($link['href']); //задание класса спану от пути ссылки
      $output .= '<li' . drupal_attributes(array('class' => $class)) . '><span>';
      $options = array('attributes' => '', 'html' => TRUE);
      if (isset($link['href'])) {
        if ($attributes['id'] == 'navlist') $output .= '<span class="'.$span_class.'">'.l($link['title'], $link['href'], $options).'</span>';
        else $output .= l($link['title'], $link['href'], $options);
      }
      else if (!empty($link['title'])) {
        // Вывод псевдо-ссылок
        if (empty($link['html'])) {
          $link['title'] = check_plain($link['title']);
        }
        if ($attributes['id'] == 'navlist') $output .= '<span>' . $link['title'] . '</span>';
        else $output .= $link['title'];
      }
 
      $i++;
      $output .= "</span></li>\n";
    }
 
    $output .= '</ul></div>';
  }
 
  return $output;
}
?>

Вызов в page.tpl.php:

<div id="menu">
<?php 
if ($primary_links)  
print my_theme_primary_menu_links($primary_links, array('class' => 'links', 'id' => 'navlist')) ?>
?>
</div>

Стили для меню:

#menu #navlist {
  text-align:center;
  line-height:58px;
  height: 58px;
  width: 100%;
  display: block;
}
 
#menu #navlist li {
  display: block;
  float: left;
  height: 58px;
  margin: 0;
  padding: 0;
  border-right: 1px solid #1b1b1b;
}
 
#menu #navlist li.last {
  border-right: none;
}
 
#menu #navlist li:hover, #menu #navlist li.active-trail {
  background:url(images/m_li_active.png) repeat-x top left; /* растягиваемая ховер-картинка */
}
 
#menu #navlist li span {
  display: block;
  height: 24px;
}
 
#menu .en #navlist li span, #menu .en-US #navlist li span {
  padding: 13px 19px 21px 19px;
}
 
#menu .ru #navlist li span {
  padding: 13px 17px 21px 17px;
}
 
#menu #navlist li span:hover, #menu #navlist li.active-trail span {
  background:url(images/m_li_active_image.png) no-repeat center bottom; /* фиксированная ховер-картинка, идет поверх */
}
 
#menu .en #navlist li span span, #menu .ru #navlist li span span {
  padding: 0;
  float: left;
}
 
#menu #navlist li span span {
}
 
#menu #navlist li a {
  font-size:16px;
  font-family:verdana, sans-serif, helvetica;
  font-weight:normal;
  color:#fff;
  line-height: 24px;
  height: 20px;
  padding-top: 4px;
  display: block;
  outline: none;
}
 
#menu #navlist li span.cycles {
  background:url(images/m_cycles .png) no-repeat left bottom; /* картинка зависимая от alias'а пути */
}
 
#menu #navlist li span.cycles a {
  padding-left: 43px;
}
 
#menu #navlist li span.skates {
  background:url(images/m_skates .png) no-repeat left bottom; /* картинка зависимая от alias'а пути */
}
 
#menu #navlist li span.skates a{
  padding-left: 47px;
}