|
В данном разделе настроим главное меню.
Главное меню настраивается в шаблоне 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## </a>
##endif##</span>
##submenu##</td>
"--> |
Разделитель пунктов меню:
|
<!--#set var="main_splitter" value="<td> </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> </td>"--> |
После настройки главного меню шапка сайта будет выглядеть следующим образом:
Рисунок 26.
|
