18 февраля 2009 в 2:29
Нужно сделать css-раздвижные-двери при ховере элементов меню на сайте. Без дополнительных тегов тут не обойтись, но застрял на решении того, как их добавить. Ну для примера, вот так выглядит сейчас меню:
<div class="content">
<ul class="menu">
<li class="leaf first active-trail"><a href="..." class="active">Пункт 1</a></li>
<li class="leaf"><a href="...">Пункт 2</a></li>
<li class="leaf"><a href="...">Пункт 3</a></li>
<li class="leaf last"><a href="...">Пункт 4</a></li>
</ul>
</div>
<ul class="menu">
<li class="leaf first active-trail"><a href="..." class="active">Пункт 1</a></li>
<li class="leaf"><a href="...">Пункт 2</a></li>
<li class="leaf"><a href="...">Пункт 3</a></li>
<li class="leaf last"><a href="...">Пункт 4</a></li>
</ul>
</div>
А нужно сделать вот так:
<div class="content">
<ul class="menu">
<li class="leaf first active-trail"><a href="..." class="active"><span class="...">Пункт 1</span></a></li>
<li class="leaf"><a href="..."><span class="...">Пункт 2</span></a></li>
<li class="leaf"><a href="..."><span class="...">Пункт 3</span></a></li>
<li class="leaf last"><a href="..."><span class="...">Пункт 4</span></a></li>
</ul>
</div>
<ul class="menu">
<li class="leaf first active-trail"><a href="..." class="active"><span class="...">Пункт 1</span></a></li>
<li class="leaf"><a href="..."><span class="...">Пункт 2</span></a></li>
<li class="leaf"><a href="..."><span class="...">Пункт 3</span></a></li>
<li class="leaf last"><a href="..."><span class="...">Пункт 4</span></a></li>
</ul>
</div>
Порылся тут поиском, и на друпал.орг. Как и думал, не один я таким вопросом задался. Однако все в пустую, везде либо темы без ответов, либо с предложениями, которые у меня отказались работать.
Например, вот тут есть материал по этой теме:
http://drupal.org/node/249864
http://drupal.org/node/245156
Но, все что я ни прописывал в template.php моей темы, после обновления кэша у меня сайт вешался, выдавая ошибку в синтаксисе или еще что-то.
Надеюсь из тутошних резидентов кто-то с таким сталкивался и знает рабочее решение.
Комментарии
$link['title'] =
'<span class="classname">'.
(isset($link['localized_options']['html']) && $link['localized_options']['html']
?
$link['title']
:
check_plain($link['title'])).
'</span>';
$link['localized_options']['html'] = TRUE;
return theme_menu_item_link($link);
}
woohhoo! честно говоря, не расчитывал на столь быстрый, а главное, рабочий ответ! спасибо большое!
А такой вопрос: а если, к примеру, нужно просто добавить тег "span" рядом с title'ом не обромляя его, типа:
или
<li class="leaf"><a href="...">Пункт 3<span></span></a></li>
тогда как?
совсем люди думать обленились
копи-паст всех погубит
к чему этот комментарий?
к тому, что посмотрите код и надите то место, где поменять его надо.
от вас не требуется ничего добавлять, только поменять местами.
случайный трипл-пост
ну с этим разобрался, а как добавить тег после тега "А"? как ни пытался в в template.php добавлять в аутпут при формировании
, ни выводился он ((
кстати, как можно сделать ховер-эффект меню по типу меню "Содержаение номера" вот здесь http://www.4geeks.ru ? т.е. вот такое "выезжание" и "прятание" ховер-фоновой-картинки. Я так понимаю тут без jQuery не обойтись...
случайный трипл-пост
Задача аналогичная.
Подскажите, пожалуйста, чайнику, как правильно подключить этот код.
Я создал в корне своей темы (/sites/all/themes/mytheme) файлик template.php, вставил туда код из первого комментария (естественно обрамил тегом php). Не сработало.
Может с 2009 года и поменялось всё? Drupal 7.25
Как минимум, версия мажорная версия друпала поменялась
Но сам подход к добавлению кода у меня правильный?
Код не нужно менять, а достаточно вставить как есть? В гуглах видел, что в некоторых вариантах в название функций и переменных нужно подставлять название своей темы (но всё равно не работают и те варианты). Здесь не нужно?
Нагуглил ответ для Drupal 7:
<?php
function МАШИННОЕ_НАЗВАНИЕ_ВАШЕЙ ТЕМЫ_menu_link(array $variables) {
$element = $variables['element'];
$sub_menu = '';
if ($element['#below']) {
$sub_menu = drupal_render($element['#below']);
}
$element['#localized_options']['html'] = TRUE;
$linktext = '<span class="your_class">' . $element['#title'] . '</span>';
$output = l($linktext, $element['#href'], $element['#localized_options']);
return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}
?>
Обратите внимание, что в названии функции нужно изменить участок на название Вашей темы.
Источник - https://drupal.org/node/1020500
Кстати, так ответ и для Drupal 6 - но я проверял только для семёрки.
Установка (я сам чайник и до сегодняшнего дня сам не знал, что с этим делать, так что не думаю, что это будет лишним):
В корневой папке Вашей темы создать файл и template.php, вставить в него код и сохранить. Если такой файл уже есть, то код добавляем в самый конец (гуру, поправьте, пожалуйста, если что не так).