Делаем меню из картинок в drupal (image menu)

Не все дизайнерские решения укладываются в оформление посредством css. В этот раз, это  — главное меню сайта. Нужно было изобразить отдельные пункты меню отдельными картинками, а активные элементы меню показать другими картинками. Есть действительно оригинальные дизайнерские решения, а в моём случае в сss не вписался фильтр «сияния» fireworks, примененный дизайнером к заголовкам активных пунктов меню.

В начале, задача мной формулировалась так — для каждого пункта меню нужно иметь возможность задать в админ-панели  две картинки. Одна картинка изображает неактивное состояние, а вторая — активное состояние пункта меню. Хорошо бы также генерировать кусочек css, описывающий переключение этих картинок через состояние hover ссылки меню. Т.е. навели мышку на пункт меню — браузер отобразил активную картинку.

Я пробежался по модулям на drupal.org, нашел почти то что надо — модуль menu_icons. Цель модуля немного иная, но очень близкая. Модуль позволяет отобразить иконку рядом с пунктом меню. При этом в админке можно указать картинку для каждого пункта меню. Модуль также поддерживает работу с модулем image cache.

Я проделал несколько вещей:

• Смягчил ограничение на размер загружаемой картинки (оно было прошито в модуле 45х45 пикс., я сделал 500×150)
• Добавил в редактор меню загрузку ещё одной картинки
• Изменил набор параметров для генерации css шаблона (того, что описывает подстановку фоновых картинок в меню)

Вот измененный архив модуля.

Что нам ещё нужно для получения окончательного результата?

• Добавить в используемую нами тему оформления шаблон для генерации css пунктов меню с картинками (файл с именем — menu_icons_css_item.tpl.php)
• Провести темизацию меню, т.е. добавить зацепку к функции theme_links в шаблон используемой темы, где производится вывод пунктов меню без текста ссылки (так как изображением ссылки является фоновая картинка) в тех случаях, когда картинки заданы. Обычно зацепка описывается в файле темы — template.php.
• Задать некоторые стили для нашего меню в главном файле стилей, используемой темы оформления. Т.е. задать общее поведение пунктов меню — отступы, шрифты, прилегание.

Файл menu_icons_css_item.tpl.php

Два описания стилей служат для трех случаев — для неактивного пункта меню, с соответствующей фоновой картинкой, и для случаев — активного пункта меню и пункта меню, на который навели курсор мыши (hover). Имена стилей привязаны к id пунка меню, что позволяет добиться уникальности.

Темизация меню

Предлагаю вам для примера, тот код, который я написал для своего случая. Основная особенность его в том, что мы разделяем пункты меню на те, что имеют в своём описании картинки и те, что идут без таковых. Ещё можно отметить, что я верстаю меню не на ul — li элементах,  а на обычных div-ах. В основном, для того, чтобы не перебивать настройки стилей по умолчанию браузеров, и для более гладкой кросс-браузерной совместимости.

Добавим стили к нашей теме оформления

Этот этап вообще сугубо индивидуальный, и зависит целиком от дизайна. Хорошо, когда каждое меню имеет свой контейнер со своим id. Тогда стили базируются на описании этого контейнера и элементов этого контейнера.