Пятница, 29.11.2024, 18:58:40 На сайте Московское время

SyLenze

(Постов: 634)

Denis

(Постов: 85)

TSGK

(Постов: 29)

jasminka

(Постов: 16)

Naruto

(Постов: 15)

TRaBZ

(Постов: 13)

Новые сообщения | Участники | Правила форума | Поиск | RSS

  • Страница 1 из 1
  • 1
Красивое раздвижное меню.
SyLenze
 Страна: Российская Федерация 
 Дата: Пятница, 11.06.2010, 14:05:32 | Сообщение # 1

Группа: Администратор
Сообщений: 634
Награды: 12
Уважение: 40
Off
[spoiler="Спойлер"][/spoiler]

1.Скачайте АРХИВ , распаковывать и залить папку "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 : 11px;color : #fff;padding-left : 10px;background : url(/menu/accordion.png) no-repeat right 0;line-height :25p;height : 25px;cursor : pointer;margin : 0;text-align : left;font-weight : bold;}  
.accordion h3:hover {background : url(/menu/accordion.png) no-repeat right -25px;color : #ffa;}  
.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%;}  
/* ---------- */

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

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="DarkOrange">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/>

Источник: взят из пака скриптов


 
  • Страница 1 из 1
  • 1
Поиск:


TERA-RAPTOR.clan.su © Все права защищены! Используются технологии uCoz Сайт оптимизирован под браузер FireFox Mozilla. SiteMap | SiteMap Forum.