Раздвижное меню "Accordion" - Скрипты - Всё для Ucoz - Каталог файлов

DEMO

Скачиваем архив, распаковываем и заливаем папку "menu" в корень сайта.
В шаблоны перед нижним тегом

Код:

</body>

ставим:

Код:

В CSS вставляем:

Код:

/* 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%;
}
/* ---------- */

Далее редактируете ссылки и ставите код:

Код:

<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>

В старой системе uCoz просто создайте глобальный блок, вставьте код и разместите ссылку на него в нужном вам месте - например создаем глобальный блок, называем его "MENU", ставим в него данный код, сохраняем и код блока $GLOBAL_MENU$ ставим в шаблон.

В новой системе -

Установка:

Включаем конструктор, создаём новый блок, далее жмём на значок шестерёнки в правом верхнем углу нового блока, далее идем на вкладку "HTML"
удаляем там всё и вставляем наш код. Сохраняем и пользуемся!!!

[p.s.]Ширина меню 188px, если надо пошире или поуже откройте картинку "accordion" в фотошопе, измените размер (только ширину) и сохраните. Формат картинки "PNG".[/p.s.]

Категории раздела

Форма входа

ОНЛАЙН РАДИО

Друзья сайта