Центр документации
|
Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »
В данном разделе рассмотрим настройку верхнего меню. Верхнее меню настраивается в шаблоне menu.tpl. Цвет ссылок меню задается в файле стилей common.css, класс top_menu. В нашем случае необходимо сделать цвет неактивного пункта меню в системе RGB 767676, цвет активного пункта меню, а так же цвет пункта меню при наведении на него курсора мыши FF4800. При этом шрифт ссылок меню должен быть жирный и без подчеркивания.
Следовательно, в файл стилей common.css настраиваем стили следующим образом:
После настройки стилей на сайте отобразится следующее:
Рисунок 21.
По дизайну верхнее меню расположено вертикально, т.е. каждый пункт меню находится в отдельной строке. Структура html-кода верхнего меню выглядит следующим образом:
Сет основного блока меню должен выглядеть следующим образом
где ##content## - переменная, которая собирается из n-го количества ячеек пунктов меню. Сеты для пунктов меню должны иметь следующий вид:
1. для неактивного пункта меню
2. Для активного пункта меню
Сплиттер для верхнего меню:
После сохранения шаблона на фронтовой части сайта получаем:
Рисунок 22.
Перед каждой ссылкой верхнего меню нам необходимо поместить картинку оранжевого цвета. Для этого, необходимо из графического макета вырезать следующую картинку и сохранить ее как top_arrow.gif. Расстояние между картинкой и пунктом меню равно двум пробелам. Вставим картинку в сеты для активного и неактивного пунктов меню. Сеты будут выглядеть следующим образом:
1. для неактивного пункта меню:
2. Для активного пункта меню
По дизайну расстояние между строками, в которых расположены пункты верхнего меню, равно 10 px. Следовательно сет для сплитера будет такой:
После настройки верхнего меню шапка сайта выглядит так:
Рисунок 23. |
|||||||||