Главная
Регистрация
Вход
Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость |RSS  
               
 
Растрыгин Роман 
   

Реклама



Видео реклама

Облако тэгов

Включить музыку

Меню сайта

 Новости сайта 
Главная » 2015 » Февраль » 25 » Стилизация выпадающего меню
11:37
Стилизация выпадающего меню

Стилизация выпадающего меню.

Самое первое. Для того, чтобы не менялись стили всего другого на странице, в стилях надо прописывать классы по образцу: 
Quote
#uMenuDiv1 .class {styles}

где 1 - номер созданного меню. То есть, перед классом мы фактически подставляем часть кода, выделенную красным. 

Стили задаются в CSS. 
Quote
.mySiteMenu .class {background:red !important; color:green !important;}

1. Цвет ссылок задаётся классами
Quote (В обычном состоянии)
.u-menu a:link,.u-menu a:visited,.u-menu a:active {color:red;font-size:10pt;text-decoration:none;}
 
Quote (При наведении курсора на ссылку)
.u-menu a:hover {color:red;font-size:11pt;text-decoration:none;}

2. Класс стрелочки , указывающей на то, что в меню вложено подменю (оригинальный код): 
Quote
.u-menuarrow {background:transparent url(/.s/img/wd/3/ar1.gif) no-repeat scroll 5px 8px;height:16px;width:16px;position:absolute;right:0;top:0}

3. Все остальные стили (основные) на двух картинках: первая - непосредственно тело меню, вторая - его обрамление. 
 
 

−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−− 
 
 

Пример изменения меню для дизайна 983. 
 

#uMenuDiv1 .u-menuvitem {margin:1px;background:#f7d6e9;} 
#uMenuDiv1 .xw-tl {background:#FFF1F9;} 
#uMenuDiv1 .xw-tc {background:#FFF1F9;} 
#uMenuDiv1 .xw-tr {background:#FFF1F9;} 
#uMenuDiv1 .xw-ml {background:#FFF1F9;} 
#uMenuDiv1 .xw-mc {background:#FFF1F9;border-right:1px solid #ffc3cf;border-bottom:1px solid #ffc3cf;border-top:1px solid #fff3f5;border-left:1px solid #fff3f5;} 
#uMenuDiv1 .xw-mr {background:#FFF1F9;} 
#uMenuDiv1 .xw-bl {background:#FFF1F9;} 
#uMenuDiv1 .xw-bc {background:#FFF1F9;} 
#uMenuDiv1 .xw-br {background:#FFF1F9;} 
#uMenuDiv1 .u-menuitemhl {margin:1px;background:#f7d6e9;}
1
2
3
4
5
6
7
8
9
10
11
12
13


Номер дизайна здесь приведён исключительно чтобы сравнить цвет. 
 
 
 
Просмотров: 842 | Добавил: Модератор_Блога | Рейтинг: 3.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *:

Подписаться

Узнавайте новости сайта по почте:

 

Наши гости

Календарь
«  Февраль 2015  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
232425262728

Поиск

Рейтинг@Mail.ru Яндекс.Метрика  Copyright "YNAO RikNord IT qroup" © 2021   Хостинг от uCoz www.rastrygin.ru