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

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


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


Настройка верхнего меню

В данном разделе рассмотрим настройку верхнего меню.

Верхнее меню настраивается в шаблоне menu.tpl.

Цвет ссылок меню задается в файле стилей common.css, класс top_menu.

В нашем случае необходимо сделать цвет неактивного пункта меню в системе RGB 767676, цвет активного пункта меню, а так же цвет пункта меню при наведении на него курсора мыши FF4800. При этом шрифт ссылок меню должен быть жирный и без подчеркивания.

 

Следовательно, в файл стилей common.css настраиваем стили следующим образом:

 

.top_menu, .top_menu a, .top_menu a:visited {font-size:10px;color:767676;font-weight:bold;text-decoration:none}

.top_menu a:hover {font-size:10px;color:FF4800;font-weight:bold}

.top_menu a.item_top_active, .top_menu a.item_top_active:visited {font-size:10px;color:FF4800;font-weight:bold}

 

После настройки стилей на сайте отобразится следующее:

 

Рисунок 21.

 

По дизайну верхнее меню расположено вертикально, т.е. каждый пункт меню находится в отдельной строке. Структура html-кода верхнего меню выглядит следующим образом:

 

<table cellpadding=0 cellspacing=0>

<tr><td>пункт 1</td></tr>

<tr><td>пункт 2</td></tr>

……

<tr><td>пункт n</td></tr>

</table>

 

Сет основного блока меню должен выглядеть следующим образом

 

<!--#set var="top_block" value="<table cellpadding=0 cellspacing=0 class="top_menu">##content##</table>"-->

 

где ##content## - переменная, которая собирается из n-го количества ячеек пунктов меню.

Сеты для пунктов меню должны иметь следующий вид:

 

1. для неактивного пункта меню

 

<!--#set var="top_item" value="##splitter##<tr><td><a href="##link##"><nobr>##name##</nobr></a></td></tr>"-->

 

2. Для активного пункта меню

 

<!--#set var="top_item_active" value="##splitter##<tr><td><a class=item_top_active href="##link##"><nobr>##name##</nobr></a></td></tr>"-->

 

Сплиттер для верхнего меню:

 

<!--#set var="top_splitter" value="<tr><td></td></tr>"-->

 

После сохранения шаблона на фронтовой части сайта получаем:

 

Рисунок 22.

  

Перед каждой ссылкой верхнего меню нам необходимо поместить картинку оранжевого цвета. Для этого, необходимо из графического макета вырезать следующую картинку и сохранить ее как top_arrow.gif.

Расстояние между картинкой и пунктом меню равно двум пробелам.

Вставим картинку в сеты для активного и неактивного пунктов меню. Сеты будут выглядеть следующим образом:

 

1. для неактивного пункта меню:

 

<!--#set var="top_item" value="##splitter##<tr><td><img src="_img/top_arrow.gif">&nbsp;&nbsp;<a href="##link##"><nobr>##name##</nobr></a></td></tr>"-->

 

2. Для активного пункта меню

 

<!--#set var="top_item_active" value="##splitter##<tr><td><img src="_img/top_arrow.gif">&nbsp;&nbsp;<a class=item_top_active href="##link##"><nobr>##name##</nobr></a></td></tr>"-->

 

По дизайну расстояние между строками, в которых расположены пункты верхнего меню, равно 10 px. Следовательно сет для сплитера будет такой:

 

<!--#set var="top_splitter" value="<tr><td height=10></td></tr>"-->

 

После настройки верхнего меню шапка сайта выглядит так:

 

Рисунок 23.

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

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