Центр документации
Карта сайта

Создай визитку сам!


Самоучитель по интеграции дизайна и настройке Amiro.CMS на примере демонстрационной версии пакета Визитка »


Настройка шаблона меню

Для того чтобы быстро найти шаблон меню воспользуемся фильтром. В списке модулей выбираем «Менеджер Сайта:Меню» (см. рис. 20) и нажимаем кнопку «Применить фильтр», либо клавишу «Enter».

Рис. 20

После фильтрации в списке модулей остается один шаблон menu.tpl (см. рис. 21).

Рис. 21

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

Рассмотрим простой пример настройки модуля главного меню. Допустим нам необходимо настроить меню, таким образом, чтобы пункты меню шли горизонтально, между пунктами расстояние равное 5 px.

Открываем шаблон menu.tpl. Рассмотрим сеты основного меню:

<!--#set var="main_block" value=""-->

это основной блок html, он необходим для общего оформления меню, к примеру как будут располагаться пункты меню по горизонтали, или по вертикали, ширину меню в целом.

Для примера составим сет следующим образом:

В него вкладываются сеты:

<!--#set var="main_item" value=""-->

<!--#set var="main_item_active" value=""-->

Данные сеты представлят собой непосредственно пункты меню.
main_item” – неактивный пункт меню,
main_item_active” – активный пункт меню.

Для нашего примера составим сеты следующим образом:

 

Чаще всего содержание этих сетов одинаково, но могут быть различия в оформлении. Эти сеты разделяются сетом:

<!--#set var="main_splitter" value=""-->

Данный сет служит для оформления меню.

После внесения изменений сохраняем шаблон. При сохранении шаблона кеш сбрасывается автоматически, поэтому можно сразу увидеть результат.

Все стили для отображения меню настраиваются в глобальных стилях (общий файл стилей common.css).

.main_menu {background-color:#89C6D7} – настройка ширины таблицы меню, фонового изображения или фонового цвета и т.д..
.main_menu TD{padding-left:10px} – настройка отступов в ячейках, фонового изображения или фонового цвета и т.д.
.main_menu A, .main_menu A:visited {color:#000000;font-weight:bold;text-decoration:none;} – настройка стиля обычной ссылки, посещенной ссылки.
.main_menu A:hover {color:#ffffff;text-decoration:none;font-weight:bold;} - настройка внешнего вида ссылки при наведении на пункт меню мыши.

Есть возможность задавать разное содержание в зависимости от наличия пунктов подменю. Пункты меню, для которых задана картинка, используют свои сеты с приставкой img_ в начале имени сета. Сеты выпадающего меню (sub_xxx) используются только в основном меню. Нижнее и верхнее меню не имеет подменю.

Сет "menu_jspreload" настройке не подлежит.

Положение выпадающего меню относительно пункта главного меню задается в виде координат при вызове onmouseover="showMenu(##id##,0,'left','bottom',-8,0);".

Существует возможность отображения html-кода всплывающего меню в конце страницы. Для того чтобы включить данную возможность, необходимо зайти «Сервис – Настройка системы», в верхних списках должно быть «Менеджер сайта» - «Менеджер сайта» и параметру «Выводить html-код всплывающего меню в конце страницы» нужно поставить значение «Включено». Ниже можно указать «Количество уровней в главном меню» - (1, 2 или 3).

Верхнее и нижнее меню имеет тот же набор сетов.

Верхнее меню: top_block, top_item, top_item_active, top_splitter.

Нижнее меню: bottom_block, bottom_item, bottom_item_active, bottom_splitter.

Версия для печати

Установка и настройка Руководство пользователя Интеграция дизайна Разработчикам (API)
 2000 – 2021 © Amiro.CMS Все права защищены.