Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Стилизация выпадающего меню (Только стили и только выпадающее системное)
Стилизация выпадающего меню
Модератор форума
Сообщение # 1 | 15:28:35
Самое первое. Для того, чтобы не менялись стили всего другого на странице, в стилях надо прописывать классы по образцу:
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 (15.3 Kb) · 5465566.png (16.1 Kb) · 0686052.png (5.6 Kb) · 2654497.png (5.6 Kb)
Сообщение отредактировал _}{0тт@бь)ч_ - Суббота, 25 Апр 2009, 15:41:27
Baddy
Сообщений: 58
Репутация: 18
Уровень замечаний:

Сообщение # 31 | 11:14:06
Дело в том, что работа кода построена именно на значениях margin-padding, любое изменение значения отражается на всей картинке:
Тест (внизу готовый шаблон, вверху мои попытки)

Любой Путь верный, что ведёт к Добру и Свету
Сообщение отредактировал Baddy - Четверг, 22 Дек 2011, 11:15:53
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 32 | 11:26:07
Baddy, #nav li {float: left; width: 120px; margin-top: -10000px;}

Напишите 100px и вставьте , попробуйте ..

DarkAp
Сообщений: 21
Репутация: 1

Сообщение # 33 | 05:14:56
Прочитал посты, которые написаны выше, с выпадающим меню, но так и не понял, каким образом можно сделать так, чтобы стандартное выпадающее меню мгновенно пропадало? А то это юкозовское залипание - напрягает. (Можно поставить любое другое меню на ксс, но хочу чтобы всё работало стандартными средствами, так как оно самое стабильное)
Сообщение отредактировал DarkAp - Суббота, 14 Янв 2012, 05:16:13
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 34 | 06:15:57
Цитата (DarkAp)
каким образом можно сделать так, чтобы стандартное выпадающее меню мгновенно пропадало? А то это юкозовское залипание - напрягает.

Стандартно - никак.
...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
ABEEZ
Сообщений: 6
Репутация: 0

Сообщение # 35 | 22:44:29
Кто подскажет. Как сделать что бы выпадающее меню исчезало после увода курсора с пункта меню?
FeniX_kz
Сообщений: 1642
Репутация: 971

Сообщение # 36 | 21:00:29
Quote (ABEEZ)
Как сделать что бы выпадающее меню исчезало после увода курсора с пункта меню?

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

.::I'll be back::.
Выбор за тобой!
DATO0283
Сообщений: 5
Репутация: 10

Сообщение # 37 | 15:35:25
rsod,
Доброго времени суток добрым людям!
Переделал меню на сайте канторы и остались 3 неразрешенных проблемы касающиеся выпадающего меню 2 и 3 уровней:
1. Как менять позиционирование меню 3 уровня(что бы оно не наезжало на меню 2 уровня и было на одинаковой высоте с ним)?
2. Как отдельно изменить стиль посещенного пункта меню(т.е. если страница, соответствующая этому пункту меню открыта)?
3. Как сделать так что бы при наведении на пункты меню 2 и 3 уровней родительский пункт меню оставался активным(выделенным)?

код прилагаю:
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 38 | 15:18:01
DATO0283,
Quote (DATO0283)
1. Как менять позиционирование меню 3 уровня(что бы оно не наезжало на меню 2 уровня и было на одинаковой высоте с ним)?

Только стилями - отрицательным отступом вправо к выпадающему списку.

Quote (DATO0283)
2. Как отдельно изменить стиль посещенного пункта меню(т.е. если страница, соответствующая этому пункту меню открыта)?

Только скриптом.

Quote (DATO0283)
3. Как сделать так что бы при наведении на пункты меню 2 и 3 уровней родительский пункт меню оставался активным(выделенным)?

Только скриптом.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Myşatinu
Сообщений: 2
Репутация: 2

Сообщение # 39 | 23:33:51
подскажите пожалуйста, как сделать выпадающего меню не в лева а в право?
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 40 | 23:43:24
Myşatinu,
Quote (Myşatinu)
подскажите пожалуйста, как сделать выпадающего меню не в лева а в право?

Специально, никак.
Оно само, в зависимости от расположения блока меню, выпадает в нужную сторону.

Прикрепления: 8854911.png (25.6 Kb)

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Myşatinu
Сообщений: 2
Репутация: 2

Сообщение # 41 | 00:46:25
fflesh, если шаблон не укозовски, то меню падает толика справа sad
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 42 | 00:49:32
Myşatinu,
Quote (Myşatinu)
если шаблон не укозовски, то меню падает толика справа

Если шаблон не юкозовский, полагаю и меню не юкозовское.
Данная тема - только по системному меню

Напишите в тему: Дизайн: решение вопросов - ссылка на сайт обязательна.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 43 | 11:55:10
Hasan_999,
Quote (Hasan_999)
Спасибо..а как вставить отдельную иконку для каждого раздела меню?

В системное меню, разные для каждого пункта?
Назначить пункту свой класс - через редактирование свойств пункта и фоновую картинку для этого класса.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
elektrosteam
Сообщений: 3
Репутация: 0

Сообщение # 44 | 09:48:33
Добрый день!
Я перечитал здесь все посты, но прошу помощи, т.к. точного описания где, что и как менять в стандартном шаблоне CSS меню нет. Мне хочется просто изменить шрифт на больший, чем есть, и цвет шрифта на другие (цвета в зависимости от активности) - я еще не решил на какие цветовые решения решиться, но главное - сам принцип: где, что и как конкретно или какая строчка в CSS меню что обозначает. Я - дилетант в этом, поэтому очень прошу помощи у гуру! Дизайн 971, сайт http://www.elektrosteam.ru. Или может кто-нибудь конкретно со мной пообщается по этому вопросу. Заранее спасибо.
P.S. Дайте, плиз, ссылочку на форуме, где обсуждается вопрос об автоматической высоте центральной части сайта, чтобы она не зависила от количества текста.
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 45 | 10:16:44
elektrosteam,
Quote (elektrosteam)
Я перечитал здесь все посты, но прошу помощи, т.к. точного описания где, что и как менять в стандартном шаблоне CSS меню нет. Мне хочется просто изменить шрифт на больший, чем есть, и цвет шрифта на другие (цвета в зависимости от активности)

Цвет и размер ссылок задаётся вот так:
Quote (CSS)
.u-menu a:link,
.u-menu a:visited {
color:red;
font-size:10pt;
}

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Стилизация выпадающего меню (Только стили и только выпадающее системное)
Поиск: