Раді вітати Вас на сайті: www.Fendak.at.ua                                              Реєстрація  Вхід  Вихід

Ви увійшли як Гість [Гости]. Нових повідомлень: 0
Меню сайту

Швидкий доступ

Ресурси \ Сайти
Одна гривня
Одна гривня

Конвертер валют
FreeCurrencyRates.com


Статистика

Яндекс.Метрика
Онлайн всього: 1
Гостей: 1
Користувачів: 0
 Новини статті та інше
Головна » Статті » Статті » Адміністратор

Як поміняти колір випливаючого меню

Среди последних обновлений в 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>
Создано синее меню в синей рамке.
Таким образом, вариантов достаточно и я надеюсь, Вы найдете себе подходящий.

Категорія: Адміністратор | Додав: Nike (08.08.2010)
Переглядів: 6307 | Рейтинг: 2.0/1
Всього коментарів: 0
avatar
Copyright ПГ Бистрий © 2024
[Створити безкоштовний сайт на uCoz]