Меню для установки в блок сайта uCoz - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Вертикальное меню для сайта uCoz » Меню для установки в блок сайта uCoz

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Меню для установки в блок сайта uCoz

Меню для установки в блок сайта uCoz




Применяются 2 варианта,для установки в правый и левый блок меню,в зависимости от требуемой ситуации.Установку можно производить через конструктор сайта,изменив названия пунктов и ссылки на свои.Меню имеет несложные настройки и вы сможете сами подогнать его под размеры и цвет подходящий Вашему дизайну.Цвет или символы для меню можно выбрать введя в поиске сайта "цвет" или "символы" без ковычек,есть много инструментов для регулировок.В примере демонстрационного кода проставлены комментарии выше свойств в которых можно сделать изменения.При возникновении  каких то сложностей или советов по поводу этого материала,опишите подробнее в форме комментариев в нижней части страницы.





Установите этот код в левый блок сайта

<style>
#leftblock {
/* - Ширина блока - */
width:200px;
padding:0;
margin:0;
list-style:none;
}
#leftblock ul {
padding:0;
margin:0;
text-indent:0;
list-style:none;
}
#leftblock li {
padding:0;
margin:3px;
}
#leftblock li a {
display:block;
/* - Цвет фона до наведения - */
background-color:#D6D6D6;
padding:7px;
margin:0;
text-decoration:none;
/* - Цвет текста до наведения - */
color:#222;
/* - Цвет нижнего бордюра до наведения - */
border-bottom:1px solid #222;
text-align:right;
}
#leftblock li a::after {
/* - Символ перед названием - */
content:'»';
color:#ССС;
font-weight:bold;
display:inline;
float:right;
margin:0 2px 0 5px;
}
#leftblock li a:hover, #leftblock li a:focus {
/* - Цвет фона при наведении - */
background:#B8B8B8;
/* - Цвет бордюра при наведении - */
border-bottom-color:#D6D6D6;
}
#leftblock li a:hover::after {
margin:0 0 0 7px;
/* - Цвет текста при наведении - */
color:#222;
}
#leftblock li a:active {
padding:8px 7px 6px 7px;
}
</style>
<ul id="leftblock">
<li><a href="#">Главная страница</a></li>
<li><a href="#">Каталог новостей</a></li>
<li><a href="#">Каталог статей</a></li>
<li><a href="#">Каталог сайтов</a></li>
<li><a href="#">Каталог файлов</a></li>
<li><a href="#">Каталог фото</a></li>
<li><a href="#">Каталог видео</a></li>
<li><a href="#">Каталог аудио</a></li>
<li><a href="#">Каталог опросов</a></li>
</ul>


Установите этот код в правый блок сайта

<style>
#rightblock {
/* - Ширина блока - */
width:200px;
padding:0;
margin:0;
list-style:none;
}
#rightblock ul {
padding:0;
margin:0;
text-indent:0;
list-style:none;
}
#rightblock li {
padding:0;
margin:3px;
}
#rightblock li a {
display:block;
/* - Цвет фона до наведения - */
background-color:#FF0000;
/* - Высота пунктов\отступ от слов - */
padding:7px;
margin:0;
text-decoration:none;
/* - Цвет текста до наведения - */
color:#222;
/* - Цвет нижнего бордюра до наведения - */
border-bottom:1px solid #80FF00;
text-align:left;
}
#rightblock li a::after {
/* - Символ перед названием - */
content:'«';
color:#ССС;
font-weight:bold;
display:inline;
float:left;
margin:0 5px 0 2px;
}
#rightblock li a:hover, #rightblock li a:focus {
/* - Цвет фона при наведении - */
background:#80FF00;
/* - Цвет бордюра при наведении - */
border-bottom-color:#FF0000;
}
#rightblock li a:hover::after {
margin:0 7 0 0px;
/* - Цвет текста при наведении - */
color:#222;
}
#rightblock li a:active {
padding:8px 7px 6px 7px;
}
</style>
<ul id="rightblock">
<li><a href="#">Главная страница</a></li>
<li><a href="#">Каталог новостей</a></li>
<li><a href="#">Каталог статей</a></li>
<li><a href="#">Каталог сайтов</a></li>
<li><a href="#">Каталог файлов</a></li>
<li><a href="#">Каталог фото</a></li>
<li><a href="#">Каталог видео</a></li>
<li><a href="#">Каталог аудио</a></li>
<li><a href="#">Каталог опросов</a></li>
</ul>


Поместите примеры в редактор для осмотра









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1997 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: юкоз, сайта, меню, block, конструктор, uCoz, Menu, Блок

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]