Не все дизайнерские решения укладываются в оформление посредством 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?php /** * Variables: * $mlid * $path, $path2 * $width * $height * $pos * @author dylan@opensourcery.com * rewrited by shra : to@shra.ru */ ?> .menu-<?php print $mlid ?> a { background: url(<?php print $path ?>) no-repeat top left; width: <?=$width?>px; height: <?=$height?>px; display: block; } .menu-<?php print $mlid ?> a:hover, .menu-<?php print $mlid ?> a.active { background: url(<?php print $path2 ?>) no-repeat top left; width: <?=$width?>px; height: <?=$height?>px; display: block; } |
Два описания стилей служат для трех случаев — для неактивного пункта меню, с соответствующей фоновой картинкой, и для случаев — активного пункта меню и пункта меню, на который навели курсор мыши (hover). Имена стилей привязаны к id пунка меню, что позволяет добиться уникальности.
Темизация меню
Предлагаю вам для примера, тот код, который я написал для своего случая. Основная особенность его в том, что мы разделяем пункты меню на те, что имеют в своём описании картинки и те, что идут без таковых. Ещё можно отметить, что я верстаю меню не на ul — li элементах, а на обычных div-ах. В основном, для того, чтобы не перебивать настройки стилей по умолчанию браузеров, и для более гладкой кросс-браузерной совместимости.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php function MYTHEMENAME_links($links, $menuattr) { $out = ''; print_r($links); foreach ($links as $k => $v) { if (empty($v['menu_icon']['enable'])) { $out .= "<div class=\"$k\">" . l($v['title'], $v['href'], array('class' => $k)) . "</div>"; } else { if (preg_match('/menu-([\d]+)/', $k, $m)) $mlid = $m[1]; else $mlid = 0; $out .= "<div class=\"$k\">" . l('', $v['href'], array('class' => $k)) . "</div>"; } } return '<div ' . drupal_attributes($menuattr) . '>' . $out . '</div>'; } ?> |
Добавим стили к нашей теме оформления
Этот этап вообще сугубо индивидуальный, и зависит целиком от дизайна. Хорошо, когда каждое меню имеет свой контейнер со своим id. Тогда стили базируются на описании этого контейнера и элементов этого контейнера.
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 исчезнет.
В фале menu_icons.module — этот баг был изначально от мантейнера!
все запросы к БД написанные не корректно перепутаны » и ‘ — их порядок следования!
не знаю как дело обстоит при использовании БД mysql
но при использовании postgresql вылазиет ошибка о неправильности запроса к БД связанного с квотированием!
короче все запросы к БД нада поправить!
вот что я имею ввиду
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…..
ну и т.д.
ImageMenu? http://drupal.org/project/imagemenu
Да, судя по названию, то что надо. А судя по размерам архива — без лишних наворотов.