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

ФОРУМ Игромания и киномания – сообщество пользователей игрового портала Igromen.Do.Am.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления и сообщения, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.

ТОП-5 по сообщениям

Димон

754

ТОП-5 по репутации

754

Страница 1 из 1
1

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

17.10.2012 в 14:42

Димон

Администраторы

/.s/a/38/496767602.png

Менеджер проекта

Статус:

Online

Регистрация:

07.10.2012

Сообщения:

754

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

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.

Code

#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;}

Номер дизайна здесь приведён исключительно чтобы сравнить цвет.

Прикрепления: 4006414.png(15Kb) · 5465566.png(16Kb) · 0686052.png(6Kb) · 2654497.png(6Kb)

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

Страница 1 из 1
1

О портале Igromen.Do.Am

Контакты

В помощь пользователям