Разноцветное вертикальное меню в блок сайта

источник

---

Вертикальное меню с раздвигающимся эффектом полностью адаптировано для применения на сайте uCoz.Меню состоит из разноцветных пунктов при нажатии на которые происходит открытие вложенных подпунктов.Само открытие сопровождается эффектом своеобразного ударения, что добавляет менюшке оригинальности.Для установки потребуется скопировать 1 файл стилей и 2 файла скриптов в верхнюю часть сайта.Основную часть меню можно добавить через конструктор создав дополнительный блок для него.Менюха работает при подключенной библиотеки jQuery, она подключена на сайтах юКоз по умолчанию.

---

Коды для установки в верхнюю часть сайта

<link rel="stylesheet" type="text/css" href="http://delaisait.ucoz.ru/script/menu/css/2013/iStu10.css" />
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/menu/js/2013/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://delaisait.ucoz.ru/script/menu/js/2013/iStu10.js"></script>

Код с основной частью меню для установки через конструктор

<ul class="iStu10">
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP1">Пункт 1</a>
<ul class="iStu10drop dp1">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
<li><a href="#url">Подпункт 5</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP2">Пункт 2</a>
<ul class="iStu10drop dp2">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP3">Пункт 3</a>
<ul class="iStu10drop dp3">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
<li><a href="#url">Подпункт 5</a></li>
<li><a href="#url">Подпункт 6</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP4">Пункт 4</a>
<ul class="iStu10drop dp4">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
</ul>
</li>
<li class="iStu10Top">
<a href="#url" class="iStu10TopA iStu10TopP5">Пункт 5</a>
<ul class="iStu10drop dp5">
<li><a href="#url">Подпункт 1</a></li>
<li><a href="#url">Подпункт 2</a></li>
<li><a href="#url">Подпункт 3</a></li>
<li><a href="#url">Подпункт 4</a></li>
</ul>
</li>
</ul>

Меню в подключенном состоянии