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

Страница 1 из 10 1 2 3 … 9 10 »
Модератор форума: Yuri_G

Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Стилизация выпадающего меню (Только стили и только выпадающее системное)

Модератор форума

Сообщение # 1 | 15:28:35 25 Апр 2009

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

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

rsod

Сообщений: 324

Сообщение # 2 | 15:28:35 25 Апр 2009

Quote

#uMenuDiv1 .class {styles}

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}

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

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

Code

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

Прикрепления: 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

vvf

Сообщений: 58

Репутация: 9

Сообщение # 3 | 21:23:38 17 Янв 2010

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

vdim

Сообщений: 337

Репутация: 161

Сообщение # 4 | 02:15:20 18 Янв 2010

vvf, сделайте подобную строчку:

Code

#uMenuDiv1 .u-menu a:link {font: bold 7pt; text-decoration: none; color:#00d514;}

только соответственно вставьте те параметры которые вам нужны....
так же можно сделать и для visited, active и hover ...

Прекрасное есть, но мы там не представлены...
Хотите сказать "спасибо" - ставьте "плюсик" в репутацию...)))

Thno

Репутация: 1

Сообщение # 5 | 15:00:21 13 Фев 2010

Что нужно поставить вместо "xxx"

Code

#uMenuDiv2 .xxx {border:1px #ffffff}

чтобы border был не вокруг всего всплывающего меню, а вокруг каждой строки?

I'm not a trendy asshole
I do what I want
I do what I feel like

webpress

Сообщений: 2

Репутация: 3

Уровень замечаний:

Сообщение # 6 | 15:40:21 13 Фев 2010

Thno,

Попробуй так

#uMenuDiv2 .u-menuvitem {border:solid 1px black;);
#uMenuDiv2 .u-menuitemhl {border:solid 1px red;); ------ при наведении

Сообщение отредактировал webpress - Суббота, 13 Фев 2010, 16:22:58

PingOfDeath

Сообщений: 11

Репутация: 0

Сообщение # 7 | 02:23:12 12 Ноя 2010

Quote (_}{0тт@бь)ч_)

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

Это цитата из первого поста.
Как убрать это обрамление? Вообще его скрыть, или сделать абсолютно прозрачным...
Понимаю что в строчки с .xw-tl, .xw-tc, и т.д. нужно что то дописать, но что?

Сообщение отредактировал PingOfDeath - Пятница, 12 Ноя 2010, 02:23:50

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 8 | 02:36:53 12 Ноя 2010

PingOfDeath,

Quote (PingOfDeath)

Вообще его скрыть, или сделать абсолютно прозрачным...

Quote

.class{background:transparent!important;}

...

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8

mika6669

Сообщений: 4

Репутация: 2

Сообщение # 9 | 02:21:23 08 Дек 2010

Мужики помогите упарился в код смотреть и тыкать не выходит методом научного тыка, Затея простейшая чтоб при наведении выделялось все а уменя тока края и если прям на ссылку то и она но не вся кнопка, и еще почему то криво во втором меню а в первом нормально.

Прикрепления: 2422808.jpg (31.4 Kb)

olegsuv

Сообщений: 1365

Репутация: 127

Сообщение # 10 | 02:43:24 08 Дек 2010

mika6669,

Code

:hover {display: block; padding: 3px; background: black; color: white;}

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям

olegsuv

Сообщений: 1365

Репутация: 127

Сообщение # 11 | 19:09:08 11 Дек 2010

Quote (mika6669)

даже не могу придумать в каком коде может прописываться ширина выпадающего меню.

Ширину можно задать чему угодно.
Также можно задать ссылкам display:block, тогда они должны сами растянуть родительский элемент.

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям

-=Juger=-

Сообщений: 7

Репутация: 0

Сообщение # 12 | 15:35:21 08 Янв 2011

Возник вопрос, который я сам не смог решить.
1)есть стандартное вертикальное выпадающее меню. цвет шрифта в выпавшем меню я сделал серым. Хочу сделать так, что бы при наведении курсора в выпавшем меню на пункт, цвет шрифта в этом меню менялся на белый. Это можно сделать?
В основном меню я так сделал , а в выпадающем не получается
2) можно ли сделать так: при наведении на пункт в основном меню, выделять его так же, как и в выпадающем меню? вокруг красной полоской на всю длину основного меню?
сайт http://capital.3dn.ru/

Code

/* Стиль выпадающего меню */
#uMenuDiv1 .xw-tl {background:#46060a;}/* лев. верхний угол */
#uMenuDiv1 .xw-tc {background:#46060a;}/* шапка */
#uMenuDiv1 .xw-tr {background:#46060a;}/* прав. верхний угол */
#uMenuDiv1 .xw-ml {background:#46060a;}/* лев. стенка */

#uMenuDiv1 .xw-mc {border: /*solid*/ #ffffff 1px; background: #18181a;}/* стиль рамки и подложка*/

#uMenuDiv1 .xw-mr {background:#280305;}/* прав. стенка */
#uMenuDiv1 .xw-bl {background:#46060a;}/* лев. нижний угол */
#uMenuDiv1 .xw-bc {background:#280305;}/* подвальчик */
#uMenuDiv1 .xw-br {background:#280305;}/* прав. нижний угол */
#uMenuDiv1 .u-menuitemhl {border:solid 1px #ffffff;font-size:10pt;margin:1px;background:#a91615;}/* расстояние между подпунктами и цвет при наведении */
#uMenuDiv1 .u-menuvitem {color:#8c8c8c;}/* цвет шрифта в вып меню- фон */

/* ----- */

/* Site Menus */
.uMenuH li {float:left;padding:0 5px;}

/* Неактивные пункты меню */
.uMenuV .uMenuItem {font-size:12px;font-weight:normal}/* общий цвет пункт меню */
.uMenuV li a:link {text-decoration:none; color:#ffffff}
.uMenuV li a:active {text-decoration:none; color:#8c8c8c}/* цвет неактивный пункт меню */
.uMenuV li a:visited {text-decoration:none; color:#8c8c8c}/* цвет посещенных */
.uMenuV li a:hover {text-decoration:underline; color:#ffffff;background:#a91615; margin: 15px;}/* наведение на неактивный пункт меню */

/* активные пункты меню */
.uMenuV .uMenuItemA {font-weight:bold;font-size:12px; color:#ffffff}
.uMenuV a.uMenuItemA:link {text-decoration:none; color:#FFFFFF}/* цвет посещенных */
.uMenuV a.uMenuItemA:visited {text-decoration:underline;font-weight:bold;font-size:13px; color:#ffffff}/* цвет активного пункта */
.uMenuV a.uMenuItemA:hover {text-decoration:underline; color:#ffffff; background:#a91615;}/* наведение на активный пункт меню на активной странице */
.uMenuV .uMenuArrow {position:absolute;width:10px;height:10px;right:0;top:3px;background:url('/.s/img/wd/1/ar1.gif') no-repeat 0 0;}
.uMenuV li {margin: 0; padding: 0 0 0 13px; background: url('/.s/t/731/23.gif') no-repeat 0px 2px; margin-bottom: .6em;}
#uMenuDiv1 li {margin: 4 5px 4 5px;} /* свойства ячейки пункт меню и позиционирование пунктов меню */
/* --------- */

Сообщение отредактировал -=Juger=- - Суббота, 08 Янв 2011, 16:46:24

olegsuv

Сообщений: 1365

Репутация: 127

Сообщение # 13 | 16:00:03 08 Янв 2011

-=Juger=-,

1,2. Псевдокласс :hover

Любые работы по:
- Javascript, jQuery, HTML, CSS
- Верстке макетов и установке их на сайты
- Нестандартным решениям

Grayy

Сообщений: 3

Репутация: 11

Сообщение # 14 | 20:49:31 13 Янв 2011

А как сделать цвет меню прозрачным?

fflesh

Сообщений: 1784

Репутация: 1314

Сообщение # 15 | 21:07:52 13 Янв 2011

Grayy,

Quote (Grayy)

А как сделать цвет меню прозрачным?

Quote

Сообщение отредактировал fflesh - Четверг, 13 Янв 2011, 21:08:07

Страница 1 из 10
1
2
3
…
9
10
»