Меню горизонтальное разноцветное | Скрипт для сайта 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


Меню горизонтальное разноцветное на CSS3




Меню лёгкое и не будет нагружать страницы Вашего сайта.Для установки на страницу просто отредактируйте содержимое названий и ссылок.Можно устанавливать весь код в Верхней части сайта.Если Вам не понятна работа тегов или свойств,воспользуйтесь поиском сайта.Основные свойства в примере кода выделены ссылками,посмотрите материал чтобы быть в курсе.Проверьте код вставив его в HTML редактор который находится в нижней части страницы.




Пример кода меню


<style>
.menu1Holder {position:relative; float:left; overflow:hidden; font:normal bold 11px/35px verdana, sans-serif;margin:30px;}
.menu1Holder .shadow {height:10px; width:90%; left:5%; top:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
ul.menu1 {margin:0; list-style:none; display:block; float:left; height:100px; position:relative; padding:0 60px;}
ul.menu1 li {margin:0 5px 0 0; float:left;}
ul.menu1 li a {color:#ddd; padding:0 10px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius: 0 0 10px 10px;
-o-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
ul.menu1 li a.red {background:#a00;}
ul.menu1 li a.orange {background:#da0;}
ul.menu1 li a.yellow {background:#aa0;}
ul.menu1 li a.green {background:#060;}
ul.menu1 li a.blue {background:#00a;}
ul.menu1 li a.indigo {background:#2b0062;}
ul.menu1 li a.violet {background:#682bc2;}
ul.menu1 li a:hover {background:#aaa; color:#fff; padding:10px 10px 0 10px;}
ul.menu1 li a.red:hover {background:#c00;}
ul.menu1 li a.orange:hover {background:#fc0;}
ul.menu1 li a.yellow:hover {background:#cc0;}
ul.menu1 li a.green:hover {background:#080;}
ul.menu1 li a.blue:hover {background:#00c;}
ul.menu1 li a.indigo:hover {background:#5b1092;}
ul.menu1 li a.violet:hover {background:#8a2be2;}
</style>
<div class="menu1Holder">
<ul class="menu1">
<li><a href="#url" class="red">М Е Н Ю 1</a></li>
<li><a href="#url" class="orange">М Е Н Ю 2</a></li>
<li><a href="#url" class="yellow">М Е Н Ю 3</a></li>
<li><a href="#url" class="green">М Е Н Ю 4</a></li>
<li><a href="#url" class="blue">М Е Н Ю 5</a></li>
<li><a href="#url" class="indigo">М Е Н Ю 6</a></li>
<li><a href="#url" class="violet">М Е Н Ю 7</a></li>
</ul>
<div class="shadow"></div>
</div>

Проверить код меню на месте

Вставьте код меню в HTML редактор и проверьте.









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 4147 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: Меню для uCoz, menu gorizontal

    Всего комментариев: 2
    0   Спам
    2 Vladimir   (25.03.2013 16:34)
    Аватар Vladimir Спасибо всё работает

    0   Спам
    1 Vladimir   (24.03.2013 19:01)
    Аватар Vladimir Михаил добрый вечер подскажите как менюшку выравнить по центру куда только не вставлял <"center">, не прёт это первое и второе посмотрите у меня на сайте под меню много пустоты появилось после добавления скрипта, можно както уменьшить или скрипт прикрепить к нихней части шапки http://tyristkaraganda.ru/, заранее благодарю, и извеняюсь я в HTML кодах полный чайник, благодаря конечно вам и таким как вы пытаюсь сайт сделать более привлекательным, заранее спасибо


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