DEMO
Скачиваем АРХИВ, распаковываем и заливаем папку "menu" в корень сайта.
В head ставим:
Code
<script language="javascript" type="text/javascript" src="/menu/jquery.js"></script>
<script language="javascript" type="text/javascript" src="/menu/accordion.js"></script>
В CSS вставляем:
Code
/* Menu */
.accordion h3 {
font-size : 12px;
color : #fff;
padding-left : 10px;
background : url(../menu/accordion.png) no-repeat right 0;
line-height :25px;
height : 25px;
cursor : pointer;
margin : 0;
text-align : left;
font-weight : bold;
font-family: Arial, Helvetica, sans-serif;
}
.accordion h3:hover {
color : #ffa;
background-image: url(../menu/accordion.png);
background-repeat: no-repeat;
background-position: right -25px;
}
.accordion h3.active {
background : url(../menu/accordion.png) no-repeat right -50px;
}
.accordion h3.active:hover {
background : url(../menu/accordion.png) no-repeat right -75px;
}
.accordion p {
display : none;
margin : 0;
padding : 7px 0 7px 7px;
}
.accordion a {
font-size : 11px;
color : #fff;
text-align : left;
font-weight : bold;
padding-left : 15px;
}
.accordion p.linked a {
background : url(../menu/bull.gif) no-repeat 0 50%;
}
.accordion p.linked a:hover {
background : url(../menu/bulls.gif) no-repeat 0 50%;
}
/* ---------- */
Далее редактируете ссылки и ставите код:
Code
<div class="accordion">
<h3>Главное меню</h3>
<p class="linked">
<a href="/">Главная страница</a><br/>
<a href="/gb/">Гостевая книга</a><br/>
<a href="/index/0-3">Обратная связь</a><br/>
<a href="/board/">Доска объявлений</a><br/>
<a href="/publ/">Каталог статей</a><br/>
<a href="/dir/">Каталог сайтов</a><br/>
<a href="/blog/">Блог</a><br/>
<a href="/faq/"><font color="#ff8c00">FAQ (вопрос/ответ)</font></a><br/>
</p>
<h3>Компьютер</h3>
<p class="linked">
<a href="/load/">Каталог файлов</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
</p>
<h3>Отдохни</h3>
<p class="linked">
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
</p>
<h3>Форум</h3>
<p class="linked">
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
<a href="/">Пусто</a><br/>
</div>
<br />
В старой системе uCoz просто создайте глобальный блок, вставьте код и разместите ссылку на него в нужном вам месте - например создаем глобальный блок, называем его "MENU", ставим в него данный код, сохраняем и код блока $GLOBAL_MENU$ ставим в шаблон.
В новой системе -
Установка №1:
Помещаем код между:
Code
<!-- <sblock_menu> -->
сюда ставим код
<!-- </sblock_menu> -->
далее идем в быструю замену, режим замены многострочный,
в верхнее поле - если меню слева ставим $GLOBAL_CLEFTER$
если меню справа ставим $GLOBAL_DRIGHTER$, а в нижнее поле ставим:
меню слева
Code
<!-- <sblock_menu> -->
здесь код меню
<!-- </sblock_menu> -->
$GLOBAL_CLEFTER$
меню справа:
Code
<!-- <sblock_menu> -->
здесь код меню
<!-- </sblock_menu> -->
$GLOBAL_DRIGHTER$
жмем "заменить"
Если всё сделали правильно у вас появится новое меню.
Старое меню если не исчезло можно удалить через конструктор, просто удалив блок со старым меню!!!
Установка №2:
Включаем конструктор, создаём новый блок, далее жмём на значок шестерёнки в правом верхнем углу нового блока, далее идем на вкладку "HTML"
удаляем там всё и вставляем наш код. Сохраняем и пользуемся!!!
Ширина меню 188px, если надо пошире или поуже откройте картинку "accordion" в фотошопе, измените размер (только ширину) и сохраните. Формат картинки "PNG".
