10 491 Скрипты / Menu & Nav

Многоуровневое меню типа аккордеон

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

HTML

Используем, как обычно списки для меню:

CSS

Стили конечно вы можете отредактировать для лучшего внедрения в дизайн вашего сайта.

JS

В шапке <head> подключаем библиотеку jQuery (если не подключена)

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
И в том же <head> добавляем скрипт вызова меню:
<script language="jаvascript">
$(document).ready(function() {
    $(".topnav").accordion({
        accordion:false,
        speed: 500,
        closedSign: '[+]',
        openedSign: '[-]'
    });
});
</script>
Функция accordion({опции}) может иметь несколько опций:
  • accrodion: false, (если true - то меню ведет себя, как аккордеон - то есть если раскрыт пункт 1, вы хотите раскрыть пункт 2, то пункт 1 сам сворачивается и т.д.)
  • speed:500, (скорость раскрытия/сворачивания)
  • closeSign: '[+]', (текст или html код визуально отображающий нам, что данный пункт меню содержит раскрывающийся список)
  • openSign: '[-]', (текст или html код визуально отображающий нам, что список данного пункта меню раскрыт)
Скачать 4936Загрузок 7,46 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи