Категории раздела |
Профиль для ucoz
[9]
Новый профиль для ucoz, мини профиль для ucoz, скрипт для ucoz профиль, профиль для сайта ucoz
|
Ajax для ucoz
[13]
Ucoz ajax, ajax окна для ucoz, скрипты ajax для ucoz, новые ajax окна для ucoz, новый вид ajax ucoz
|
Скрипты для ucoz
[128]
скачать скрипты для ucoz, скрипты ucoz
|
Меню для ucoz
[45]
меню для ucoz, горизонтальное меню для ucoz, раздвижное меню ucoz, вертикальное, выпадающие меню ucoz
|
Календари для ucoz
[20]
скрипт календарь cs, скрипт для ucoz календарь, календарь для ucoz cs 1.6, календари ucoz
|
Часы для ucoz
[31]
часы для ucoz, часы для ucoz cs 1.6
|
Статистика для ucoz
[11]
статистика cs для ucoz
|
Форма входа для ucoz
[15]
форма входа для ucoz
|
Переключатели для ucoz
[9]
Переключатели страниц для ucoz
|
Шапки для ucoz
[13]
шапки для ucoz cs 1.6
|
|
|
-
Главная
-
Скрипты для ucoz
-
Меню для ucoz
-
Меню для сайта ucoz
Навигация на сайте должна быть красивой и удобной, именно эти функции выполняет данное вертикальное меню для uCoz. Цветовая гамма меню выполнена в 2 тонах: синий и оранжевый, которые менются при наведении на ссылку меню. Скрипт меню ucoz не содержить тяжелых для сайта js и jquery.
Меню для uCoz в серых тонах
Если кто-то захочет изменить цветовую гамму меню, увидеть его в серых тонах под Ваш дизайн, напишите это в комментарих и я предоставлю серую вариацию меню.
Шаг-1 Установка CSS
Заходим в П.У - Дизайн - Упр. Дизайном(CSS) и в самый низ вставляем:
Code
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu {
width: 200px;
margin: 10px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFF;
display: block;
background: url(https://wallaby.ucoz.ru/demo/img/menu.gif);
padding: 8px 0 0 35px;
}
#menu li a:hover {
color: #FFF;
background: url(https://wallaby.ucoz.ru/demo/img/menu.gif) 0 -32px;
padding: 8px 0 0 35px;
}
#menu li span {
position: absolute;
left: 12em;
margin-top: -1.4em;
width: 10em;
display: none;
}
#menu li:hover span { display: block;}
#menu li span a { display: inline; }
Шаг-2 Установка HTML
Вставляем в нужное на сайте место, обычно это Глобальные блоки: Верхняя часть сайта.
Code
<div id="menu">
<ul>
<li><a href="https://wallaby.ucoz.ru">CSS Главная</a></li>
<li><a href="#">CSS Меню</a>
<span>
<a href="#">1Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">CSS Меню</a>
<span>
<a href="#">2Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">CSS Меню</a>
<span>
<a href="#">3Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">CSS Меню</a>
<span>
<a href="#">4Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">CSS Меню</a>
<span>
<a href="#">5Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
<li><a href="#">CSS Меню</a>
<span>
<a href="#">6Ссылка</a>
<a href="#">Ссылка</a>
<a href="#">Ссылка</a>
</span>
</li>
</ul>
</div>
|
Категория
Меню для ucoz
| Добавил:
Wallaby
| Просмотров:
13975
|
|
|
Комментарии отсутствуют