Разноцветное меню CSS для uCoz
827материалов
228тем на форуме
3003комментария
6154пользователя

Разноцветное меню CSS для uCoz


Простое разноцветное меню CSS для uCoz и не только. Данное меню подойдет под любую CMS, установка меню очень проста. Цвета имеющиеся в CSS: красный(red), оранжевый(orange), розовый(pink), зеленый(green), синий(blue), индиго(indigo), фиолетовый(violet), серый(grey). В материале присутствует демонстрация материала. Данное меню можно использовать в адаптивных дизайнах, так как меню тоже адаптивное. Скрипт простой, легок в установке и не нагружает Ваш сайт. Возникнут вопросы по установке, задавайте их в комментариях.

Установка:

Ставим данный код где хотим видеть меню:
Код
<div class="container">   
<span id="red"></span>   
<span id="orange"></span>   
<span id="pink"></span>   
<span id="green"></span>   
<span id="blue"></span>   
<span id="indigo"></span>   
<span id="violet"></span>   
<span id="grey"></span>   
<div class="colorScheme">   
<a href="#red" class="red"></a>   
<a href="#orange" class="orange"></a>   
<a href="#pink" class="pink"></a>   
<a href="#green" class="green"></a>   
<a href="#blue" class="blue"></a>   
<a href="#indigo" class="indigo"></a>   
<a href="#violet" class="violet"></a>   
<a href="#grey" class="grey"></a>   
</div> <ul id="nav">   
   <li><a href="#">Главная</a></li>   
<li><a class="hsubs" href="#">Меню 1</a>   
<ul class="subs">   
<li><a href="#">Подменю 1</a></li>   
<li><a href="#">Подменю 2</a></li>   
<li><a href="#">Подменю 3</a></li>   
<li><a href="#">Подменю 4</a></li>   
<li><a href="#">Подменю 5</a></li>   
</ul>   
</li>   
<li><a class="hsubs" href="#">Меню 2</a>   
<ul class="subs">   
<li><a href="#">Подменю 2-1</a></li>   
<li><a href="#">Подменю 2-2</a></li>   
<li><a href="#">Подменю 2-3</a></li>   
<li><a href="#">Подменю 2-4</a></li>   
<li><a href="#">Подменю 2-5</a></li>   
<li><a href="#">Подменю 2-6</a></li>   
<li><a href="#">Подменю 2-7</a></li>   
<li><a href="#">Подменю 2-8</a></li>   
</ul>   
</li>   
<li><a class="hsubs" href="#">Меню 3</a>   
<ul class="subs">   
<li><a href="#">Подменю 3-1</a></li>   
<li><a href="#">Подменю 3-2</a></li>   
<li><a href="#">Подменю 3-3</a></li>   
<li><a href="#">Подменю 3-4</a></li>   
<li><a href="#">Подменю 3-5</a></li>   
</ul>   
</li>   
<li><a href="#">Меню 4</a></li>   
<li><a href="#">Меню 5</a></li>   
<li><a href="#">Меню 6</a></li>   
</ul>   
</div>

А этот код ставим в Таблицу стилей(CSS) в самый низ:
Код
/* Разноцветное меню CSS для uCoz */   
#nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; }   
#nav { background-color: #000000; border-radius: 5px 5px 5px 5px; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); display: table; padding: 10px; position: relative; }   
#nav ul { background-color: red; border:1px solid red; border-radius: 0 5px 5px 5px; border-width: 0 1px 1px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); left: -9999px; overflow: hidden; padding: 20px 0 10px; position: absolute; top: -9999px; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.1s linear; -ms-transition: -ms-transform 0.1s linear; -o-transition: -o-transform 0.1s linear; -webkit-transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; }   
#nav li { float: left; position: relative; }   
#nav li a { color: #FFFFFF; display: block; font-size: 16px; padding: 7px 20px; text-decoration: none; }   
#nav li:hover > a { background-color: red; border-radius: 5px 5px 5px 5px; color: #FFFFFF; }   
#nav li:hover > a.hsubs { border-radius: 5px 5px 0 0; }   
#nav li:hover ul.subs { left: 0; top: 34px; width: 180px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); -webkit-transform: scaleY(1); }   
#nav ul li { width: 100%; }   
#nav ul li:hover > a { background-color: #222222 !important; border-radius: 5px 5px 5px 5px; }   
/* colors */   
.colorScheme { height: 32px; list-style: none outside none; margin: 0 auto 25px; width: 320px; }   
.colorScheme a { cursor: pointer; float: left; height: 30px; margin: 0 5px; width: 30px; }   
.colorScheme .red { background-color: red; }   
.colorScheme .orange { background-color: orange; }   
.colorScheme .pink { background-color: pink; }   
.colorScheme .green { background-color: green; }   
.colorScheme .blue { background-color: blue; }   
.colorScheme .indigo { background-color: indigo; }   
.colorScheme .violet { background-color: violet; }   
.colorScheme .grey { background-color: grey; }   
/* ----- */   
#red:target ~   
#nav ul { background-color: red; border: 1px solid red; }   
#orange:target ~   
#nav ul { background-color: orange; border: 1px solid orange; }   
#pink:target ~   
#nav ul { background-color: pink; border: 1px solid pink; }   
#green:target ~   
#nav ul { background-color: green; border: 1px solid green; }   
#blue:target ~   
#nav ul { background-color: blue; border: 1px solid blue; }   
#indigo:target ~   
#nav ul { background-color: indigo; border: 1px solid indigo; }   
#violet:target ~   
#nav ul { background-color: violet; border: 1px solid violet; }   
#grey:target ~   
#nav ul { background-color: grey; border: 1px solid grey; }   
#red:target ~   
#nav li:hover > a { background-color: red; }   
#orange:target ~   
#nav li:hover > a { background-color: orange; }   
#pink:target ~   
#nav li:hover > a { background-color: pink; }   
#green:target ~   
#nav li:hover > a { background-color: green; }   
#blue:target ~   
#nav li:hover > a { background-color: blue; }   
#indigo:target ~   
#nav li:hover > a { background-color: indigo; }   
#violet:target ~   
#nav li:hover > a { background-color: violet; }   
#grey:target ~   
#nav li:hover > a { background-color: grey; }   
/* ------------------------- */

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 02.07.2015 в 15:00
Материал просмотрен: 756 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта