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

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


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


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

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

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

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

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

 

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

 

.main_menu A, .main_menu A:visited {color:#5A5A5A;font-weight:bold; text-decoration:none; text-transform:uppercase; font-size:11px}

.main_menu A:hover {color:#FF4800;text-decoration:none; font-weight:bold; font-size:11px }

.main_menu a.item_active, .main_menu a.item_active:visited { color:#FF4800;text-decoration:none; font-weight:bold; font-size:11px }

 

После настройки стилей на сайте получаем следующее:

 

Рисунок 24.

 

Над каждой ссылкой главного меню нам необходимо поместить прямоугольник серого цвета, который у активного пункта меню и при наведении курсора мыши на пункт меню становится оранжевого цвета.

Для этого, необходимо сделать две картинки:

1. картинка с прямоугольником серого цвета  ;

2. картинка с прямоугольником оранжевого цвета .

 

Нужные картинки вырезаются из графического макета дизайна сайта в графическом редакторе Adobe Photoshop.

Картинку для неактивного пункта меню назовем main_menu_img.gif, картинку для активного пункта меню и для пункта меню при наведении на него курсора мыши назовем main_menu_act_img.gif.

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

 

<table cellpadding=0 cellspacing=0>

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

<td>.пункт 2</td>……

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

</tr></table>

 

Т.е. меню располагается в одну строку <tr>...</tr>, а каждый пункт располагается в отдельной ячейке <td>.пункт n</td>.

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

 

<!--#set var="main_block" value="<table class="main_menu" border=0><tr>##content##</tr></table>"-->

 

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

 

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

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

 

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

<td valign=middle> ##if(have_submenu == "1" )##

<a name="v##id##" id="j##id##" href="##link##" onmouseover="show(##id##);" onmouseout="moff();">.##name##</a>

##else##

<a href="##link##">.##name##</a>

##endif##

##submenu##</td>

"-->

 

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

 

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

<td valign=middle><span>##if(have_submenu == "1" )##

<a class=item_active name="v##id##" id="j##id##" href="##link##" onmouseover="show(##id##);" onmouseout="moff();">.##name##</a>

##else##

<a class=item_active href="##link##">.##name##&nbsp; </a>

##endif##</span>

##submenu##</td>

"-->

 

Разделитель пунктов меню:

 

<!--#set var="main_splitter" value="<td>&nbsp;</td>"-->

 

Структура каждого пункта меню имеет вид приведенный ниже:

 

Рисунок 25.

 

Т.е. картинка расположена в одной строке, а ссылка пункта меню в другой.

 

Исходя из этого, внесем в сеты соответствующие изменения:

 

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

<td valign=middle>##if(have_submenu == "1" )##

<a name="v##id##" id="j##id##" href="##link##" onmouseover="show(##id##);" onmouseout="moff();"><img src="_img/about_2.gif" id=image_##id##><br>.##name##</a>

##else##

<a href="##link##"><img src="_img/about_2.gif" id=image_##id##><br>.##name##</a>

##endif####submenu##</td>

"-->

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

<td valign=top>##if(have_submenu == "1" )##

<a class=item_active name="v##id##" id="j##id##" href="##link##" onmouseover="show(##id##);" onmouseout="moff();"><img src="_img/about.gif"><br>.##name##</a>

##else##

<a class=item_active href="##link##"><img src="_img/about.gif"><br>.##name##</a>

##endif##

##submenu##</td>"-->

 

Тег <BR> устанавливает перевод строки в месте, где этот тег встречается.

Смена картинки, расположенной над ссылкой пункта меню, при наведении курсора мыши на пункт меню осуществим при помощи обработчиков событий onMouseOver onMouseOut. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.

Перед применением обработчиков событий необходимо картинкам присвоить уникальные идентификаторы id, которые будут связывать картинку с пунктом меню. Присвоим картинкам id=image_##id##, где ##id## - уникальные идентификаторы пункта меню (страницы выведенной в главном меню).

 

<img src="_img/about_2.gif" id=image_##id##>

 

После применения обработчиков событий, упомянутых ранее, сеты непосредственно для пункта примут следующий вид:

 

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

<td valign=top>##noindex_start##

##if(have_submenu == "1" )##

<table cellpadding=0 cellspacing=0 border=0>

<tr><td align=left><a ##relnofollow## class=item_active name="v##id##" id="j##id##" href="##link##" onmouseover="showMenu(##id##, 0,'left', 'bottom', -8, 0);" onmouseout="moff();" >

<img src="_img/about.gif"><br>.##name##</a>

##else##

<table cellpadding=0 cellspacing=0 border=0>

<tr><td align=left><a ##relnofollow## class=item_active href="##link##">

<img src="_img/about.gif"><br>.##name##</a>

##endif####noindex_end##

##submenu##</td></tr></table></td>"-->

 

Так как у активного пункта меню не должно происходить смены картинок, сет для активного пункта меню оставляем без изменений

 

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

<td valign=top>##if(have_submenu == "1" )##

<a class=item_active name="v##id##" id="j##id##" href="##link##" onmouseover="show(##id##);" onmouseout="moff();"><img src="_img/about.gif"><br>.##name##</a>

##else##

<a class=item_active href="##link##"><img src="_img/about.gif"><br>.##name##</a>

##endif##

##submenu##</td>"-->

 

По дизайну расстояние между пунктами меню равно 25 px. Тогда сет для разделителя пунктов меню будет выглядеть следующим образом

 

<!--#set var="main_splitter" value="<td width=25>&nbsp;</td>"-->

 

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

 

Рисунок 26.

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

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