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

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

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

Допиливаем вывод метатегов для главной

Январь 31, 2016 г.

Я рассказывал о замечательном модуле Metatag для Drupal 7. Задачу с выводом мета-описаний он решает на все 100%. У меня была проблема с не выводом мета-тегов для главной страницы при работе с ним. Вывод удалось восстановить, подключив рендеринг ...

Читать

Образец № 7. Заголовок уровня 3.

Август 2, 2015 г.

Для продолжения, стоит ознакомиться с экпериментом. Задачей данного образца, является демонстрация поведения ранжирования статьи при усилении ключа тегом h3. Хорошо структурированные документы более удобны для восприятия, потому тематические подзаголовки ...

Читать

 

Комментарии к «Делаем меню из картинок в 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…..

    ну и т.д.