меню для сайта в стиле аккордеона
http://www.ruseller.com/lessons/les209/example/index_collapsed.html#
Сегодня в уроке речь пойдет о создании красивого меню для Вашего сайта.
На нашем сайте уже было рассказано про бесчисленное количество разных меню. Но это меню не хуже остальных, и поэтому также заслуживает внимания.
Все ссылки, которые должны находиться в меню необходимо оформить следующим образом:
<ul id="menu">
<li>
<a href="#">Weblog Tools</a>
<ul>
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li>
<a href="#">Programming Languages</a>
<ul>
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li>
<a href="#">Cool Stuff</a>
<ul>
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li>
<a href="#">Search Engines</a>
<ul>
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
Как Вы видите здесь ссылки разбиты по разделам (т.е. сначала идет общий раздел - при нажатии на него выпадают ссылки именно из этого раздела). Также нам обязательно необходимо вставить следующий фрагмент кода между тегами <head></head>:
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu-collapsed.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
В этом коде мы подключаем jQuery, функцию меню и таблицу стилей (в ней, по желанию, можно легко изменить внешний вид такого меню).
В данном примере мы создали меню в котором при нажатии на общий раздел выпадают ссылки именно из этого раздела. Для того, чтоб они исчезли, необходимо заново нажать на общий раздел. Иногда это может быть очень неудобно. И именно для этой ситуации в архиве с исходниками находится также файл menu.js. Если Вы его используете вместо файла menu-collapsed.js в коде сверху, тогда при нажатии на другой общий раздел меню, текущий раздел будет автоматически сворачиваться (демо версия такого меню находится здесь).
Спасибо за внимание! Всего наилучшего всем!