• Страница 10 из 10
  • «
  • 1
  • 2
  • 8
  • 9
  • 10
Модератор форума: 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
player4085
Сообщений: 16
Репутация: 6

Сообщение # 136 | 20:00:54
Цитата Selena ()
player4085, в стандартном меню эти параметры не регулируются со стороны пользователя.
Java скриптами тоже не поправить в стандартном? Только отдельно меню писать самому?
Dimark
Сообщений: 114
Репутация: 13

Сообщение # 137 | 17:35:09
Доброе время суток!
У меня возник вопросик !
Как сделать горизонтальное подменю у горизонтального меню ?

Вот сайт Тут проблемка под шапкой сайта само меню и там нужно сделать горизонтальное под меню у меня что то не получается.

Вот код на всякий случай:

Denver5945
Сообщений: 11
Репутация: 0

Сообщение # 138 | 10:26:12
Здравствуйте.Я новичок, но все же своими усилиями постепенно перестроил стандартный шаблон,
так как я хотел. Но вот осталась еще одна проблема, которую я не в силах решить
сам, потому прошу помочь, у кого не будь, кто может помочь
Не знаю, как сделать, чтобы дизайн выпадающего меню соответствовал дизайну сайта. Например
как на скине 7675918, к тому же нужно чтобы оно всегда
выпадало только на левую сторону, а то как в этом скине 8811932 как то не смотрится.

http://www.kak-vubraty.com/
Большое спасибо.
Прикрепления: 7675918.png (184.8 Kb) · 8811932.png (159.4 Kb)
Сообщение отредактировал Denver5945 - Четверг, 06 Ноя 2014, 10:46:36
Хлоя_
Сообщений: 6
Репутация: 0

Сообщение # 139 | 20:43:49
Добрый день!
Прочитала тему, но самой справиться с проблемой не получилось.
1. Ширина выпадающего меню - как прописать
2. Перенести слева на право возможно?
Сайт http://trubka-domofon.ucoz.ru/
Спасибо
nsk_one
Сообщений: 1
Репутация: 0

Сообщение # 140 | 11:11:09
У меня такая проблема,меню страниц сайта при добавлении должно быть всплывающим т.к ты добавляешь под-страницу к родительской группе она должна "выплывать". Сначала все было так,но после резко перестало высвечиваться подгруппа. Т.е при наведении на ссылку скажем Главная страница+ ниже не выплывает та самая кнопочка с именем страницы подгруппы шаблон использую 1086
by-psi-x
Сообщений: 19
Репутация: 0

Сообщение # 141 | 22:12:57
Как сдвинуть выпадающее меню левее?
Пробовал использовать пример из шапки темы с добавлением
Код
right:80px !important;
но что-то оно не так... сдвинулись ссылки но не рамочка.
код
Код
/* Menus */
ul.uz, ul.uMenuRoot {list-style: none; margin: 0 0 0 0; padding-left: 0px;}
li.menus {margin: 0; padding: 0 0 0 13px; background: url('/ar.gif') no-repeat 0px 3px; margin-bottom: .6em;}
/* ----- */

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

.uMenuV .uMenuItem {font-weight:normal;line-height:30px;vertical-align:middle;}
.uMenuV li a:link {text-decoration:none; color:#DB4D00}
.uMenuV li a:active {text-decoration:none; color:#DB4D00}
.uMenuV li a:visited {text-decoration:none; color:#DB4D00}
.uMenuV li a:hover {text-decoration:none; color:#000000}

.uMenuV .uMenuItemA {font-weight:bold;line-height:30px;vertical-align:middle;}
.uMenuV a.uMenuItemA:link {text-decoration:none; color:#000000}
.uMenuV a.uMenuItemA:visited {text-decoration:none; color:#000000}
.uMenuV a.uMenuItemA:hover {text-decoration:underline; color:#000000}
.uMenuV .uMenuArrow {position:absolute;width:10px;height:10px;right:0;top:3px;background:url('ar.gif') no-repeat 0 0;}
.uMenuV li {margin: 0; padding: 0 0 0 13px; background: url('/13.gif') no-repeat; width:225px;height:33px;}

#uMenuDiv1 .u-menuvitem {margin:1px;background:#f7d6e9;right:80px !important;}
#uMenuDiv1 .xw-tl {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .xw-tc {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .xw-tr {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .xw-ml {background:#FFF1F9;right:80px !important;}
#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;right:80px !important;}
#uMenuDiv1 .xw-mr {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .xw-bl {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .xw-bc {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .xw-br {background:#FFF1F9;right:80px !important;}
#uMenuDiv1 .u-menuitemhl {margin:1px;background:#f7d6e9;right:80px !important;}
/* --------- */
сайт http://kymanjok.narod.ru/
Ещё как вариант хотел бы переделать его из $SMENU_1$ в $NMENU_1$ чтоб оно раздвигалось как на этом сайте http://opus.at.ua/photo/ только не по нажатию на + а по нажатию в любом месте пункта ФОТОГРАФИИ например. Но не знаю вообще как нужно это сделать...
keressch
Сообщений: 1
Репутация: 0

Сообщение # 142 | 12:12:12
Здравствуйте!
Подскажите пожалуйста, как изменить стили выпадающих вертикальных меню на http://keres.ucoz.ru/. Что, где и как? Чтобы их стили были точно такими же как и основных вертикальных меню. Заранее благодарен!
vikafedotova38
Сообщений: 6
Репутация: 0

Сообщение # 143 | 20:01:34
Здравствуйте! После реконструкции Юкоз, у нас на трёх сайтах изменился стиль выпадающего меню. Оно не сочетается по цвету с нашими сайтами (причём на всех трёх сайтах цвет выпадающего меню чёрный). Как вернуть старое меню.
Вот сайты http://vikafedotova38.ucoz.ru
http://muzlohovoschool.ucoz.ru
http://doorion.ucoz.net
Administrator4666
Сообщений: 2
Репутация: 0

Сообщение # 144 | 12:53:37
Здравствуйте. Подскажите, пожалуйста, как изменить цвет фона выпадающего меню. Сделать цвет таким же, как в основном меню, и цвет шрифта так же, как в основном меню. Спасибо!
Прикрепления: 1887121.jpg (125.6 Kb)
nskpc
Сообщений: 48
Репутация: 11

Сообщение # 145 | 15:20:04
Друзья! Выручайте!

Не могу найти где убрать рамку зеленую в вертикальном выпадающем меню слева?
Вот сайт: http://michurinsk.nsk.ru/

Ну все обыскал... в CSS даже цвета такого нет... беда какая-то.

Спасибо!
___

Добавил еще несколько меню, хорошо выглядит то, что выводится оператором $NMENU_1$, но почему оно всегда развернутое открывается? Можно как-то наоборот сделать, чтобы мышь наводишь - открывается?

Вопрос закрыт! Спасибо, помогли друзья-товарищи!

Думай! Решай! Действуй!
Сообщение отредактировал nskpc - Понедельник, 06 Мар 2017, 21:03:16
vampirkiss1771
Сообщений: 1
Репутация: 0

Сообщение # 146 | 13:15:36
Здравствуйте! Хочу сделать закругление к всплывающему меню (submenu). Свойство border-radius добавляет закругление только к свойству border, теперь из под border выглядывают уголки фона. Можно ли добавить закругление и к фону всплывающего меню?


Код
<ul class="menu">
<li><a href="/publ/administracija/3"><img src="/img/menu_main_02.png"></a>
   <ul class="submenu">
   <li><a id="" href="/publ/administracija/storinka_zaviduvacha/12">Сторінка завідувача</a></li>
   <li><a id="" href="/publ/administracija/nakazi_z_osnovnoji_dijalnosti/13">Накази з основної діяльності</a></li>
   </ul>
</li>
</ul>

   СТИЛИ

ul.submenu {/* общий вид всплывающего меню */
font: 12px Verdana, sans-serif;
display: none;
position:absolute;
top:3px; left:200px;
width: 153px;
border: 3px solid #a67961;
border-radius: 0px 25px 25px 25px;
z-index:1
}

ul.submenu > li {
display: block;
}

ul.submenu > li > a { /* пункт submenu */
display: block;
padding: 5px;
color: #4d2903;
background-color: #ffe0a2;
text-decoration: none;
/*border-radius: 0px 25px 25px 25px; добавляется закругление фона к каждому пункту submenu */
}

ul.submenu > li > a:hover {/* пункт submenu при наведении*/
text-decoration: underline;
}

ul.menu > li:hover > ul.submenu {
display: block;
}

Добавлено (19 Мар 2017, 13:06:20)
---------------------------------------------
сайт http://pomokli-dnz.ucoz.org

Добавлено (19 Мар 2017, 13:15:36)
---------------------------------------------
Вопрос решен. Сама только что домучила, перенесла background в ul.submenu.

Yurata
Сообщений: 3
Репутация: 0

Сообщение # 147 | 01:58:17
У меня несколько иной аспект вопроса. Веду три сайта. Все они созданы в шаблоне 932. CSS у них тоже одинаковый (привожу его ниже). Но выпадающее меню выглядит по разному, на более новых сайтах оно чёрное (см. рисунки). Как сделать, чтобы на всех сайтах выпадающее меню выглядело как на старом?

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

.uMenuV li a:hover {
text-decoration:none;
color:#000;
}

.uMenuV a.uMenuItemA:hover {
text-decoration:underline;
color:#DAE5F2;
}

.uMenuV .uMenuArrow {
position:absolute;
width:10px;
height:10px;
right:0;
top:3px;
background:url(/.s/img/wd/1/ar1.gif) 0 0 no-repeat;
}

.uMenuV li {
text-align:center;
margin:0 0 .6em;
padding:3px;
}

.uMenuV .uMenuItem,a.uMenuV .uMenuItemA {
font-weight:700;
}

.uMenuV li a:link,.uMenuV li a:active,.uMenuV li a:visited {
text-decoration:none;
color:#FFF;
}

.uMenuV a.uMenuItemA:link,.uMenuV a.uMenuItemA:visited {
text-decoration:none;
color:#97C1F2;
}
/* --------- */

СТАРЫЙ САЙТ (желаемый вид меню подстраниц)
$IMAGE3$

новый сайт
$IMAGE2$
vieska2
Сообщений: 13
Репутация: 0

Сообщение # 148 | 14:33:41
http://pandoraeo.at.ua/forum/
есть идеи в коком месте надо делать замену дизайна меню если при замене css сайт просто пропадает дизайн (выглядит как бы css был полностью удален но было заменено например кокой то цвет).
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Стилизация выпадающего меню (Только стили и только выпадающее системное)
  • Страница 10 из 10
  • «
  • 1
  • 2
  • 8
  • 9
  • 10
Поиск: