Выпадающее меню через suckerfish dropdown

Сайт растет, забот с ним все больше и больше ;) Одна из последних - куда разместить то огромное количество ссылок на важные и полезные пункты, количество которых выросло в 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/