Итак, что же нам предоставляет uCoz для создания красивого меню? Зайдя в панель управления, и перейдя в подраздел "Конструктор меню" раздела "Дизайн" я обнаружил удобную возможность создавать иерархию меню при помощи простого перетягивания пунктов на нужное мне место (drag and drop). Создам новое меню.

При создании система предложила мне выбрать название и способ отображения (вертикальный/горизонтальный). Так как меню я буду размещать в левой колонке - оно будет вертикальным. После создания меню добавляю в него разделы и подразделы - в том порядке, в котором описано в предыдущей статье. Хотелось бы заметить, что конструировать меню, просто перетягивая пункты, очень просто, и лишний раз избавляет от необходимости править код сайта. Результат моих трудов по добавлению пунктов вы можете видеть на скриншоте:

1
2
3
4
.uMenuRoot{ 
 margin:0px; 
 padding:0px; 
 }

Теперь мне нужно привести внешний вид пунктов главного меню в соответствие с придуманным мною стилем: каждый пункт вместе с указателем должен быть обрамлен в рамочку, между пунктами должно быть определенное расстояние, при наведении мышки на пункт должна происходить подмена картинки. Сделаю это, изменив стиль элементов li, которые вложены в класс uMenuRoot:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.uMenuRoot li { 
 border: solid #666666 1px; 
 list-style:none; 
 margin: 1px 1px 1px 1px; 
 padding: 4px 3px 3px 23px; 
 height:15px; 
 font-family:Tahoma,Arial,Helvetica; 
 font-weight:bold; 
 color:#FFBC00; 
 background: url('/img/plus.gif') no-repeat 3px #EFEFEF; 
 } 
 .uMenuRoot li:hover { 
 border: solid #666666 1px; 
 list-style:none; 
 margin: 1px 1px 1px 1px; 
 padding: 4px 3px 3px 23px; 
 height:15px; 
 font-family:Tahoma,Arial,Helvetica; 
 font-weight:bold; 
 color:#FFBC00; 
 text-decoration:underline; 
 background: url('/img/minus.gif') no-repeat 3px #EFEFEF; 
 }

Следующим шагом будет изменение стиля выпадающего меню - я сделаю его соответствующим стилю сайта. Для начала посмотрим как организовано выпадающее меню: центральная часть окружена объемной рамкой. Каждая сторона рамки выполнена отдельным слоем. Мне рамка не нужна, поэтому я переопределил стили сторон рамки и скрыл эти слои.

1
2
3
4
5
6
#uMenuDiv1 .xw-tl, #uMenuDiv1 .xw-bl { 
 display: none; 
 } 
 #uMenuDiv1 .xw-ml, #uMenuDiv1 .xw-mr { 
 padding: 0; 
 }

Потом мне понадобилось изменить стиль слоя, в который вложены все элементы подраздела - я изменил цвет рамки и фона слоя.

1
2
3
4
#uMenuDiv1 .xw-mc { 
 border: solid #FFFFFF 1px; 
 background: #EFEFEF; 
 }

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

1
2
3
4
5
6
7
8
9
10
11
#uMenuDiv1 .u-menuvitem { 
 background: url('/img/point1.gif') no-repeat 3px #EFEFEF; 
 padding: 3px 3px 0px 23px; 
 color:#666666; 
 } 
 #uMenuDiv1 .u-menuitemhl{ 
 background: url('/img/point1s.gif') no-repeat 3px #EFEFEF; 
 padding: 3px 3px 0px 23px; 
 color:#666666; 
 text-decoration:underline; 
 }

Итак, что же вышло?