Как настроить дизайн всплывающего меню в Ucoz

Среди последних обновлений в Ucoz появилась возможность создания всплывающего меню. Как это сделать я рассказала в предыдущей статье Новые функции после обновления в Ucoz. Создание выпадающего меню. В этот статье я хочу рассказать о том, как настроить дизайн этого меню, как изменить цвет всплывающего меню.
Итак, вариантов несколько.
Вариант 1.
Цвет всплывающего меню совпадает с цветом админ-бара. Соответственно, чтобы его поменять необходимо зайти в админ-баре в раздел Общие — Цвет админ-бара и изменить его.
Вариант 2.
Цвет админ-бара и всплывающих окон, в том числе меню задается в следующих файлах:
http://www.ucoz.com/src/layer1.css — синий
http://www.ucoz.com/src/layer2.css — зеленый
http://www.ucoz.com/src/layer3.css — серый
http://www.ucoz.com/src/layer4.css — розовый
http://www.ucoz.com/src/layer5.css — оранжевый
http://www.ucoz.com/src/layer6.css — черный
Соответсвенно можно в каждом шаблоне, где используется всплывающее меню после </head> добавить строчку:
<link type=»text/css» rel=»StyleSheet» href=»http://www.ucoz.com/src/layer1.css» />
Вариант 3.
Можно пойти дальше. Если Вам надо настроить меню на каждой странице и в дизайне Вашего сайта код шапки задан в глобальном блоке $GLOBAL_AHEADER$ (Верхняя часть сайта), то строчку из второго варианта можно добавить в этот блок. Так мы автоматом разместим <link type=»text/css» rel=»StyleSheet» href=»http://www.ucoz.com/src/layer1.css» /> на всех страницах сразу.
Вариант 4.
Но можно пойти и дальше. В этом же глобальном блоке добавляем код <style></style> и в него помещаем содержимое css-файла. И делаем с ним все, что угодно. Помещать весь фалй совсем необязательно, только то, что нужно для настройки меню. Вот пример с форума Обновление Ucoz. Создание всплывающего меню:

<style>  
.u-menu
.xw-mc{background:url(‘/1111.jpg’);border-right:1px solid
#016cdd;border-bottom:1px #016cdd;border-top:1px solid
#016cdd;border-left:1px solid #016cdd;}  
.u-menu .u-menubody
{border-left:1px solid #016cdd;border-top:1px solid
#016cdd;border-bottom:1px solid #016cdd;border-right:1px solid
#016cdd;background:transparent !important;}  
.u-menuvsep {background: url(‘/.s/img/wd/1/spr.gif’) repeat-x 0 3px;padding: 3px 0;}  
.u-menuvitem {position:relative;padding: 2px 16px 2px 4px;white-space:
nowrap;overflow:
visible;line-height:18px;zoom:1;color:#000000;text-align:left;}  
.u-menu .u-menuitemhl {background: #DEE7F6 url(‘/.s/img/wd/1/menubg.gif’) repeat-x scroll 0 0;cursor:pointer;}  
.u-menuarrow {background:transparent url(/.s/img/wd/1/ar1.gif)
no-repeat scroll 5px
8px;height:16px;width:16px;position:absolute;right:0;top:0}  
.u-menuvitemparent {}  

.u-menuh {padding-top:1px;}  
.u-menuh .u-menubody {background:transparent}  
.u-menuhsep {border-left:2px ridge #CAD9EC;height:100%}  
.u-menuhitem {padding:0;white-space: nowrap;overflow: visible;cursor:pointer;color:#000000;text-align:left;}  
.u-menuh .u-menuitemhl {cursor:pointer;}  
.u-menuitemhl .admBarLeft {background: transparent url(‘/.s/img/wd/1/tb-btn-sprite.gif’) no-repeat 0 0;}  
.u-menuitemhl .admBarRight {background: transparent url(‘/.s/img/wd/1/tb-btn-sprite.gif’) no-repeat 0 -21px;}  
.u-menuitemhl .admBarCenter {background: #DEE7F6 url(‘/.s/img/wd/1/tb-btn-sprite.gif’) repeat-x 0 -42px;}  
.admBarLeft,.admBarRight {width:3px;height:21px;float:left;}  
.admBarCenter {height:21px;float:left}  
.admBarCenter div {;padding:3px 3px 0 3px;font-weight:normal;}  

.u-menu a:link,.u-menu a:visited,.u-menu a:hover,.u-menu a:active {text-decoration:none;color:#000000;cursor:pointer;}  

.u-wndmenufr {border-left:1px solid #016cdd;border-top:1px solid
#016cdd;border-bottom:1px solid #016cdd;border-right:1px solid
#016cdd;}  
.u-wndmenu {overflow:hidden}  
.u-wndmenu .u-menuhitem {padding: 2px 6px 2px 6px;white-space: nowrap;overflow: visible;cursor:pointer}  

</style>
Создано синее меню в синей рамке.
Таким образом, вариантов достаточно и я надеюсь, Вы найдете себе подходящий.

Комментарии на Facebook