Простой способ добавить выпадающее меню к любой теме Drupal

Очень часто у пользователей Drupal или верстальщиков, которые только начинают работать с системой возникает вопрос о добавлении выпадающего меню. На самом деле сделать это не сложно и можно внедрить меню типа Superfish в любую тему Drupal.

1. Скачиваем и устанавливаем файлы Superfish меню

Для начала вам нужно скачать файлы самого меню, они прикреплены в конце статьи. Потом содержимое архива распаковать в директорию вашей темы.

2. Создаем новую область вывода

Далее в info-файле темы вам нужно добавить новую область, которая будет отвечать за вывод меню. Для этого в список областей темы нужно добавить строку:

regions[superfish_menu] = Superfish Menu

После этого вам нужно отредактировать ваш файл page.tpl.php и добавить переменную вывода меню в контейнере в id #superfish в то место, где вы планируете выводить меню.

<?php if ($superfish_menu): ?>
  <div id="superfish"><?php print $superfish_menu; ?></div>
<?php endif; ?>

3. Подгружаем JS и CSS

Теперь вернемся к нашему info-файлу темы и добавим вызов скриптов и стилей для меню посредством следующего кода:

;Superfish Stuff

stylesheets[all][] = sf/css/superfish.css
stylesheets[all][] = sf/css/theme.css
scripts[]          = sf/js/superfish.js

И еще один небольшой «кусочек» кода нужно добавить между вашего page.tpl.php файла:

<script type="text/javascript">
  $(document).ready(function() {
    $("#superfish ul.menu").superfish();
  }); 
</script>

Теперь вам необходимо очистить реестр тем (перейти в Настройки сайта и нажмите кнопку «Очистить кэш данных», чтобы новый материал описанный в info-файле загрузился в реестр тем).

4. Создание и настройка меню

Осталось самое простое — построить новое меню Drupal. Для родительских пунктов нужно установить параметр «развернутый (expanded)» в конфигурационном экране меню. См. скриншот ниже, где для примера показывается вывод навигационного меню. Затем перейдите на страницу настройки блоков и добавьте нужное блок меню в область вывода superfish_menu.

5. Стилизуем меню

Для изменения оформления меню нужно править стили в файле sf/css/theme.css. Вот и все! Да, кстати, за идею спасибо — adaptivethemes.com.

Скачать архив с файлами меню

обслуживание и поддержка сайта цены какие где