Модератор форума: Yuri_G |
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Стилизация выпадающего меню (Только стили и только выпадающее системное) |
Стилизация выпадающего меню |
Самое первое. Для того, чтобы не менялись стили всего другого на странице, в стилях надо прописывать классы по образцу:
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
|
Дело в том, что работа кода построена именно на значениях margin-padding, любое изменение значения отражается на всей картинке:
Тест (внизу готовый шаблон, вверху мои попытки) Любой Путь верный, что ведёт к Добру и Свету
Сообщение отредактировал Baddy - Четверг, 22 Дек 2011, 11:15:53
|
Baddy, #nav li {float: left; width: 120px; margin-top: -10000px;}
Напишите 100px и вставьте , попробуйте .. |
Прочитал посты, которые написаны выше, с выпадающим меню, но так и не понял, каким образом можно сделать так, чтобы стандартное выпадающее меню мгновенно пропадало? А то это юкозовское залипание - напрягает. (Можно поставить любое другое меню на ксс, но хочу чтобы всё работало стандартными средствами, так как оно самое стабильное)
Сообщение отредактировал DarkAp - Суббота, 14 Янв 2012, 05:16:13
|
Цитата (DarkAp) каким образом можно сделать так, чтобы стандартное выпадающее меню мгновенно пропадало? А то это юкозовское залипание - напрягает. Стандартно - никак. ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
Quote (ABEEZ) Как сделать что бы выпадающее меню исчезало после увода курсора с пункта меню? Если вы о стандартном меню, то никак. Если только искать другое меню в интернете и его уже настраивать так как вам нужно .::I'll be back::.
Выбор за тобой! |
rsod,
Доброго времени суток добрым людям! Переделал меню на сайте канторы и остались 3 неразрешенных проблемы касающиеся выпадающего меню 2 и 3 уровней: 1. Как менять позиционирование меню 3 уровня(что бы оно не наезжало на меню 2 уровня и было на одинаковой высоте с ним)? 2. Как отдельно изменить стиль посещенного пункта меню(т.е. если страница, соответствующая этому пункту меню открыта)? 3. Как сделать так что бы при наведении на пункты меню 2 и 3 уровней родительский пункт меню оставался активным(выделенным)? код прилагаю: |
DATO0283,
Quote (DATO0283) 1. Как менять позиционирование меню 3 уровня(что бы оно не наезжало на меню 2 уровня и было на одинаковой высоте с ним)? Только стилями - отрицательным отступом вправо к выпадающему списку. Quote (DATO0283) 2. Как отдельно изменить стиль посещенного пункта меню(т.е. если страница, соответствующая этому пункту меню открыта)? Только скриптом. Quote (DATO0283) 3. Как сделать так что бы при наведении на пункты меню 2 и 3 уровней родительский пункт меню оставался активным(выделенным)? Только скриптом. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
Myşatinu,
Quote (Myşatinu) подскажите пожалуйста, как сделать выпадающего меню не в лева а в право? Специально, никак. Оно само, в зависимости от расположения блока меню, выпадает в нужную сторону. Прикрепления:
8854911.png
(25.6 Kb)
Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
Myşatinu,
Quote (Myşatinu) если шаблон не укозовски, то меню падает толика справа Если шаблон не юкозовский, полагаю и меню не юкозовское. Данная тема - только по системному меню Напишите в тему: Дизайн: решение вопросов - ссылка на сайт обязательна. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
Hasan_999,
Quote (Hasan_999) Спасибо..а как вставить отдельную иконку для каждого раздела меню? В системное меню, разные для каждого пункта? Назначить пункту свой класс - через редактирование свойств пункта и фоновую картинку для этого класса. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
Добрый день!
Я перечитал здесь все посты, но прошу помощи, т.к. точного описания где, что и как менять в стандартном шаблоне CSS меню нет. Мне хочется просто изменить шрифт на больший, чем есть, и цвет шрифта на другие (цвета в зависимости от активности) - я еще не решил на какие цветовые решения решиться, но главное - сам принцип: где, что и как конкретно или какая строчка в CSS меню что обозначает. Я - дилетант в этом, поэтому очень прошу помощи у гуру! Дизайн 971, сайт http://www.elektrosteam.ru. Или может кто-нибудь конкретно со мной пообщается по этому вопросу. Заранее спасибо. P.S. Дайте, плиз, ссылочку на форуме, где обсуждается вопрос об автоматической высоте центральной части сайта, чтобы она не зависила от количества текста. |
elektrosteam,
Quote (elektrosteam) Я перечитал здесь все посты, но прошу помощи, т.к. точного описания где, что и как менять в стандартном шаблоне CSS меню нет. Мне хочется просто изменить шрифт на больший, чем есть, и цвет шрифта на другие (цвета в зависимости от активности) Цвет и размер ссылок задаётся вот так: Quote (CSS) .u-menu a:link, .u-menu a:visited { color:red; font-size:10pt; } Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
| |||