Активный пункт меню

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

J. Bravo 8 апреля 2008 в 16:25

Мне понадобилось для активного пункта вертикального меню изменить изображение. Нашел такое решение. Вдруг кому пригодится.

1. Переопределяем в теме функцию theme_menu_item следующим образом:

<?php
function zen_menu_item($mid, $children = '', $leaf = TRUE) {
return '

'. menu_item_link($mid) . $children ."

\n";
}
?>

2. Прописываем в css темы нужное нам отображение:

        li.active {

          list-style-image: url(/img/arrow_bold.gif);

        }

Буду рад, если кто-то поделится другими способами достичь того же результата.

Drupal5

У нас есть 3 пункта меню, каждый из которых представляет собой конструкцию <li class="leaf">
Как при выводе "по умолчанию" определить, для какого из них нужно отобразить особенную картинку, как показано на рисунке:

deska 8 апреля 2008 в 20:52

хм, у меня по-умолчанию присваивается class=active

drupal 5

Химический Али 8 апреля 2008 в 21:33

хм, у меня по-умолчанию присваивается class=active
drupal 5

вот и я про что

J. Bravo 9 апреля 2008 в 0:58

Какому элементу присваивается class=active?

Kalian 9 апреля 2008 в 8:11

Он присваивается активному элементу. В каком разделе находитесь, тот и активный.

J. Bravo 9 апреля 2008 в 8:42

Приведите, пожалуйста, фрагмент css при помощи которого при стандартном выводе для элемента меню, который выделен (независимо от того, есть или нет у него дочерние элементы), можно отобразить свою картинку (для темы Garland).

Kalian 9 апреля 2008 в 15:19

В гарланде в ксс этого фрагмента нет. Но т.к. активный пункт меню выглядит следующим образом:

<li class="leaf"><a href="урл" title="титл" class="active">пункт_меню</a></li>

, т.е. добавляется class="active", то вы можете в ксс добавить следующий код:

ul li.leaf a.active, ul li.expanded a.active, ul li.collapsed a.active {

  color: #000;

}

и изменять вид активного пункта под ваши нужды.

з.ы.: а чтобы поставить картинку, надо будет прописать для li

  list-style-type: none;

  list-style-image: none;

а бэкграунды прописывать не для классов .leaf, .expanded, .collapsed, а для ссылок, т.е. для "ul li.leaf a" и "ul li.leaf a.active"

J. Bravo 10 апреля 2008 в 1:49

так о чем и речь - изображение необходимо прописывать для элемента li (что и показано в примере). Но для нескольких абсолютно одинаковых элементов li в моем случае понадобилось вывести разные изображения, для чего и была переопределена функция генерации меню (чтобы как-то выделить тот элемент li, который содержит активную в настоящий момент ссылку).

Kalian 10 апреля 2008 в 8:46

А чем вам не разные элементы "ul li.leaf a" и "ul li.leaf a.active" или "ul li.expanded a" и "ul li.expanded a.active", для которых можно вывести разные картинки?
Дело конечно вкуса для какого элемента (li или a) делать бэкграунд, но в примеденном мной варианте не нужно дописывать доп.функцию, а только поправить только ксс.

J. Bravo 10 апреля 2008 в 11:52

А как задавая бекграунд для ссылки можно добиться такого же эффекта как при использовании list-style-image ?

Kalian 10 апреля 2008 в 15:45

Хотя бы так:

.ul li.leaf {

  list-style: none;

}

.ul li.leaf a {

  background: url(одна_картинка.жпг) left no-repeat;

  padding-left: 15px;

}

.ul li.leaf a.active {

  background: url(вторая_картинка.жпг) left no-repeat;

  padding-left: 15px;

}