Хаки и Скрипты Next Generation CMS : Меню и навигация : Раздвижное меню

irbees2008 Опубликовано - 18 - июня Меню и навигация

Автор: --------------
Адаптировал: irbees2008
Уровень сложности исполнения: нужны навыки css hmlt

Вот покапался в архивах и нашел раздвижное меню
1.Скачайте архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. , распаковывать и залить папки "images" b "js" в папку шаблона.
2.в head подключаем скрипты

Код:

<script language="javascript" type="text/javascript" src="{tpl_url}/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="{tpl_url}/js/accordion.js"></script>

если jquery уже подключен повторно подключать не надо
3. в CSS

Код:

/* Menu */ 
.accordion h3 {font-size : 11px;color : #fff;padding-left : 10px;background : url(../images/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(../images/accordion.png) no-repeat right -25px;color : #ffa;} 
.accordion h3.active {background : url(../images/accordion.png) no-repeat right -50px;} 
.accordion h3.active:hover {background : url(../images/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(../images/bull.gif) no-repeat 0 50%;} 
/* ---------- */

4.Само меню:

Код:

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

ссылки и названия меняете на свои

Можешь почитать и вот эту статейку "Стильные,аннимированные чекбоксы на CSS3"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.