Посмотреть DEMO
Меню переделывал под себя, кому нужен оригинал тому СЮДА
ОРИГИНАЛЬНОЕ DEMO
Вариант установки №1:
Скачать архив, залить картинки в папку images, скрипты в папку js;
В CSS вставить код:
Code
/* Menu accordion */
ul, li {margin:0; padding:0}
ul.container {margin: 0 auto; padding: 0px 20px 4px 9px; width: 260px}
ul.container li {list-style:none; text-align:left}
li.menu, li.menu-one {padding:2px 0; width:100%}
li.button a, li.button-one a {display:block; font-family:BPreplay, Arial, Helvetica, sans-serif; font-size:14px; color: #222; text-shadow: 1px 1px 1px #888; height:25px; overflow:hidden; padding:5px 20px 0; position:relative; width:210px}
li.button a, li.button-one a, li.button a:hover, li.button-one a:hover {text-decoration:none}
li.button a span, li.button-one a span {height:31px; position:absolute; right:0; top:0; width:4px; display:block}
li.button a.black {background:url(../images/black1.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}
li.button a.black span {background:url(../images/black1.png) top right}
li.button-one a.black {background:url(../images/black.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}
li.button-one a.black span {background:url(../images/black.png) top right}
li.button a:hover, li.button-one a:hover {background-position:bottom left}
li.button a:hover span, li.button-one a:hover span {background-position:bottom right}
.dropdown {display:none; padding-top:5px; width:250px}
.dropdown li {background-color:#444; border:1px solid #333; margin:5px 0; padding:4px 18px}
.dropdown li a {color: #CCC; text-decoration:none}
/* -------------- */
Далее в нужное место вставляем код меню:
Code
<ul class="container">
<li class="menu-one button-one"><a href="/" class="black">Главная <span></span></a></li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 1 <span></span></a></li>
<li class="dropdown">
<ul>
<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>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 2 <span></span></a></li>
<li class="dropdown">
<ul>
<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>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 3 <span></span></a></li>
<li class="dropdown">
<ul>
<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>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 4 <span></span></a></li>
<li class="dropdown">
<ul>
<li><a href="">Пока пусто</a></li>
<li><a href="">Пока пусто</a></li>
<li><a href="">Пока пусто</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-one button-one"><a href="/forum" class="black">Форум <span></span></a></li>
</ul>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
Вариант установки №2:
Скачать архив, залить картинки в папку images, скрипты в папку js;
В нужное место шаблона вставляем код:
Code
<div style="width:260px;">
<style type="text/css">
/* Menu accordion */
ul, li {margin:0; padding:0}
ul.container {margin: 0 auto; padding: 0px 20px 4px 9px; width: 260px}
ul.container li {list-style:none; text-align:left}
li.menu, li.menu-one {padding:2px 0; width:100%}
li.button a, li.button-one a {display:block; font-family:BPreplay, Arial, Helvetica, sans-serif; font-size:14px; color: #222; text-shadow: 1px 1px 1px #888; height:25px; overflow:hidden; padding:5px 20px 0; position:relative; width:210px}
li.button a, li.button-one a, li.button a:hover, li.button-one a:hover {text-decoration:none}
li.button a span, li.button-one a span {height:31px; position:absolute; right:0; top:0; width:4px; display:block}
li.button a.black {background:url(/images/black1.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}
li.button a.black span {background:url(/images/black1.png) top right}
li.button-one a.black {background:url(/images/black.png) top left; font-weight: 700; color:#222; text-shadow: 1px 1px 1px #888}
li.button-one a.black span {background:url(/images/black.png) top right}
li.button a:hover, li.button-one a:hover {background-position:bottom left}
li.button a:hover span, li.button-one a:hover span {background-position:bottom right}
.dropdown {display:none; padding-top:5px; width:250px}
.dropdown li {background-color:#444; border:1px solid #333; margin:5px 0; padding:4px 18px}
.dropdown li a {color: #CCC; text-decoration:none}
/* -------------- */
</style>
<ul class="container">
<li class="menu-one button-one"><a href="/" class="black">Главная <span></span></a></li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 1 <span></span></a></li>
<li class="dropdown">
<ul>
<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>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 2 <span></span></a></li>
<li class="dropdown">
<ul>
<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>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 3 <span></span></a></li>
<li class="dropdown">
<ul>
<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>
</li>
</ul>
</li>
<li class="menu">
<ul>
<li class="button"><a href="#" class="black">Раздел 4 <span></span></a></li>
<li class="dropdown">
<ul>
<li><a href="">Пока пусто</a></li>
<li><a href="">Пока пусто</a></li>
<li><a href="">Пока пусто</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-one button-one"><a href="/forum" class="black">Форум <span></span></a></li>
</ul>
</div>
Далее перед закрывающим тегом
вставляем скрипты:
Code
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
ВСЁ!
Автор lewonchik
Источник http://webstory.ucoz.net/