В нашем случае необходимо сделать цвет неактивного пункта меню в системе 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 меню должна выглядеть следующим образом:

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

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

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

</tr></table>

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

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

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

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

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

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

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

##else##

##endif##

##submenu##</td>

"-->

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

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

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

##else##

##endif##</span>

##submenu##</td>

"-->

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

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

Рисунок 25.

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

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

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

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

##else##

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

"-->

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

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

##else##

##endif##

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

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

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

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

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

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

<td valign=top>##noindex_start##

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

<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();" >

##else##

##endif####noindex_end##

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

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

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

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

##else##

##endif##

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

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

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