Делаем меню из картинок в 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. Тогда стили базируются на описании этого контейнера и элементов этого контейнера.

Написать комментарий

Мало букафф? Читайте есчо !

Индекс Доступности на ФармУгрозе.ру

Июль 21, 2012 г.

Сегодня запустил на сайте фармугрозы новый сервис. Удалось набрать данных по ценам на мед. препараты, что послужило основой для построения сравнительной шкалы их стоимости. А идея такой шкалы была предложена Андреем Жиляковым, с которым мы и работаем ...

Читать

Текст style CSS

Март 31, 2016 г.

Если вы решили разобраться как устроены документы в Интернет, тогда сразу после знакомства с гипертекстовой разметкой (HTML), вам нужно освоить каскадные ...

Читать

 

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

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий:

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

  1. Евгения:

    Drupal версия 6.16
    Используется стандартная тема Garland
    Делаю следующие действия:
    1. Распаковываю ваш архив в папку \www\sites\all\modules\menu_icons
    2. Создала файл menu_icons_css_item.tpl.php с содержимым кодом из вашей статьи
    3. Создала функцию function garland_links($links, $menuattr) {…} в файле template.php той же темы
    4. Подключила модуль.
    ОШИБКА Drupal
    warning: Missing argument 2 for garland_links() in W:\home\auto.site\www\themes\garland\template.php on line 177.

    В чем я могла допустить ошибку.
    Большое спасибо за данную статью очень необходимо меню из картинок. Надеюсь на вашу помошь:)

    • Жень, это ведь не ошибка, а просто warning — задайте значение $menuattr по умолчанию в объявлении ф-ции и warning исчезнет.

  2. Дмитрий:

    В фале menu_icons.module — этот баг был изначально от мантейнера!
    все запросы к БД написанные не корректно перепутаны » и ‘ — их порядок следования!
    не знаю как дело обстоит при использовании БД mysql
    но при использовании postgresql вылазиет ошибка о неправильности запроса к БД связанного с квотированием!
    короче все запросы к БД нада поправить!

  3. Дмитрий:

    вот что я имею ввиду
    174 строка файла menu_icons.module
    db_query(‘UPDATE {menu_links} SET options = «%s» WHERE mlid = %d’, serialize($options), $for…..

    а должно быть так
    db_query(«UPDATE {menu_links} SET options = ‘%s’ WHERE mlid = %d», serialize($options), $for…..

    ну и т.д.