12 ноября 2009 в 15:22
Сайт растет, забот с ним все больше и больше 
Одна из последних - куда разместить то огромное количество ссылок на важные и полезные пункты, количество которых выросло в 2 раза с момента запуска системы?
Ответ пришел сразу: сделать верхнее меню, что выводится через Primary Links, выпадающим.
Сказано - сделано. Поиск по Drupal.ru дал ссылки на модуль nice_menu, который, по обещаниям, обещал мир во всем мире, и выпадающее меню за 2 клика.
По факту выяснилось вот что: модуль работает, но в разных браузерах меню ведет себя по разному:
- В IE6 версии (с которого ходит подавляющее большинство пользователей) подпункты после темизации выводятся на прозрачном фоне, и кликать по ним крайне сложно.
- В Mozilla FireFox 3 все работает отлично
- В GoogleChrome, через который работаю я зайти в выпадающие меню невозможно - меню пропадает, как только уводишь мышь с родительского пункта.
Поиск по англоязычным ресурсам подсказал более изящное решение, с ипользованием возможностей suckerfish dropdown.
Что такое suckerfish dropdown?
Если коротко - то это возможность сделать выпадающее меню путем подключения jquery скрипта и использования css стилей. Легко, красиво, изящно.
Я воспользовалась инструкцией, приведенной вот тут: http://alankinney.com/?tag=suckerfish-dropdowns (там же можно скачать модифицированный автором статьи Garland с меню) и ура, на сайте появились нормальные, работающие в моем зоопарке из браузеров, выпадающие меню из Primary Link.
Итак, что нужно сделать:
1. Найти где в вашей теме в файле page.tpl.php происходит вызов вывода PrimaryLinks. Обычно это строка вида
print theme('links', $primary_links, array('class' => 'links primary-links'))
Эту строку нужно заменить на следующее:
$my_menu = str_replace("leaf", "", $my_menu );//strip the leaf class
$my_menu = str_replace("active-trail", "", $my_menu );//strip the active trail class
$my_menu = str_replace("menu", "", $my_menu );//strip the menu class
$my_menu = str_replace("active", "", $my_menu );//strip the active class
$my_menu = str_replace("expanded", "", $my_menu );//strip the expanded class
$my_menu = str_replace(" first", "", $my_menu );//strip the first tags (w and w/o space)
$my_menu = str_replace("first", "", $my_menu );//strip the first tags (w and w/o space)
$my_menu = str_replace(" last", "", $my_menu );//strip the last tags (w and w/o space)
$my_menu = str_replace("last", "", $my_menu );//strip the last tags (w and w/o space)
$my_menu = str_replace(" class=\"\"", "", $my_menu );//strip the now empty class attribute and quotes
$my_menu = "<ul class=\"sf-menu\">" . substr($my_menu, 4, strlen($my_menu));//replace the <ul> with a ul tag thats classed for Superfish
print ($my_menu);
Обращаю ваше внимание на "<ul class=\"sf-menu\">" - в оригинале статьи тег не был выведен, а стал тегом, и из-за этого из простого копирования кода с экрана в первый раз у меня ничего не получилось.
Что этот код делает? Он убирает из меню все ненужные классы, что добавлены в него Друпалом, и превращает меню в нормальный список из тегов ul и Li.
2. Далее, сразу после ?>, которым вы закрыли вывод меню, нужно добавить скрипт вызова jQuery.
$(document).ready(function() {
$('ul.sf-menu').superfish({
delay: 500, // one second delay on mouseout
animation: {opacity:'show',height:'show'}, // fade-in and slide-down animation
speed: 'normal', // faster animation speed
autoArrows: true, // disable generation of arrow mark-up
dropShadows: true // disable drop shadows
});
});
</script>
3. С модификацией page.tpl.php закончено. Теперь займемся модификацией style.css и script.css
Скачайте дистрибутив http://users.tpg.com.au/j_birch/plugins/superfish/superfish-1.4.8.zip, из архива которого нам понадобятся 2 файла: js/Superfish.js и css/Superfish.css. Содержимое js файла нужно вставить в ваш script.js, содержимое css-файла - в файл style.css.
4. Все Можете очистить кеш Друпал и наслаждаться вашим меню. Да, возможно вам понадобится еще стемизировать сами ссылки, но на это - FireBug вам в руки
Еще пара полезных ссылок по теме:
http://www.cssplay.co.uk/menus/
http://www.master-web.info/dropdownmenu-css-gquery/
http://www.digifuzz.net/archives/2008/06/suckerfish-style-menus-in-drupa...
http://demo.roopletheme.com/tapestry/content/24-using-suckerfish-menus
http://thedrupalblog.com/suckerfish-css-drop-down-menus-drupal-made-simple !!!
http://alankinney.com/?tag=suckerfish-dropdowns
http://www.alistapart.com/articles/dropdowns
http://users.tpg.com.au/j_birch/plugins/superfish/
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
http://drupal.org/node/34257
http://www.htmldog.com/articles/suckerfish/dropdowns/
Комментарии
пора устраивать тотальный геноцид IE6 ну и хрома(по руку попался - не страшно - все равно никто всерьез не использует)
Спасибо.
$my_menu = str_replace("leaf", "", $my_menu );//strip the---мде ну вы и учудили. все манипуляции с меню делаются черех хук шаблона
например function mymenu_tree_output($treeб $ia=1) {
$output = '';
$items = array();
// Pull out just the menu items we are going to render so that we
// get an accurate count for the first/last classes.
foreach ($tree as $data){
if (!$data['link']['hidden']){
$items[] = $data;
}
}
$num_items = count($items);
foreach ($items as $i => $data) {
$extra_class = NULL;
if ($i == 0) {
$extra_class = 'first';
}
if ($i == $num_items - 1) {
$extra_class = 'last';
}
ничего не напоминает ? не? а посмотреть апи иль посмотреть и изучить папку с иклюдами? Советую все таки глянуть
пользуются еще как.
shamaner@drupal.org, вместо того, чтобы писать код с ошибками,
и тыкать в инклюды,
может, для просвещения остальных напишите работающий хук с объяснением, куда его вставить? Думаю, многим это будет интересно.
спасибо за пример
Добрый день, пытаюсь поставить меню по описанию. В моей теме нет вызова primary в page.tpl. Есть только это -
<?php if (!empty($navigation)): ?>
<?php echo $navigation; ?>
Подскажите, пожалуйста, куда вставлять код?
у меня все хуже... Меню ставится, поставила модулем, но криво.. не могу найти как поправить
Измучилась. Ставится ниже чем нужно, тоже через navigation как писал пользователь выше... есть рецепты?
вместо того чтобы бездумно копи пастить- нужно прочитать и следовать действиям
у меня 3 вопроса возникло
1. Зачем нужен ява-скрипт внутри page.tpl
2. если у меня нет скриптов в теме, куда вписывать спефишные?, просто положить в папку jc в папку темы и друпал сам подхватит?
3. Баг какой то вылез
id="sub_">Выводится в начале меню
Не могу понять откуда взялось
Спасибо автору! Все получилось с первого раза, осталось только темизировать...
У меня меню выводится так
print phptemplate_get_primary_links()
При его замене просто исчезает меню и всё
Да, ява-скрипт надо еще прописать в info файле темы, насколько я понял.
1)Нашел в template.php функцию phptemplate_get_primary_links()
menu_tree(variable_get('menu_primary_links_source', 'primary-links'));
и подставил ее вместо menu_tree('primary-links') в первую строку. Заработало.
2) Ява скрипт подключается в info темы просто добавлением
scripts[] = script.js
В общем работает, надо только настроить покрасивше.
Уже не знаю, где и спрашивать. Тема Zen. Меню выпадает за контентом, где исправить?