Главная » Шпаргалка » PHP MYSQL javascript » jQuery » меню для сайта в стиле аккордеона

меню для сайта в стиле аккордеона

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 в коде сверху, тогда при нажатии на другой общий раздел меню, текущий раздел будет автоматически сворачиваться (демо версия такого меню находится здесь).

Спасибо за внимание! Всего наилучшего всем!