Сайт растет, забот с ним все больше и больше ;) Одна из последних - куда разместить то огромное количество ссылок на важные и полезные пункты, количество которых выросло в 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 = menu_tree('primary-links');//load the formatted menu_tree from drupal
$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.
<script type="text/javascript">
$(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/
