Красиво выезжающее боковое меню

Такое меню на сайтах весьма полезно, т.к. как и хлебные крошки, помогает улучшить навигацию по сайту.

Меню, которое я реализовала, работает на jQuery в связке с TMSlider (версии использовались 1.7 и 0.4.1 соответственно).

Первым делом подключаем  jQuery и TMSlider.

Верстка меню будет иметь примерно следующий вид:

<div class="left-column">
     <ul>
          <li>

               <a href="krepkij-alkogol.html" title="Крепкий алкоголь">Крепкий алкоголь</a>
               <ul>
                    <li>
                        <a href="vodka.html" title="Водка">Водка</a>
                    </li>
                    <li>
                          ...
                    </li>
              </ul>
          </li>
          <li>
                ...
          </li>           
     </ul>
</div>

На практике это выглядит примерно так:

jQuery код, который управляет работой меню:

jQuery(document).ready(function () {
 var $link;
 if ($link = jQuery(".left-column>ul>li>ul>li a[href='"+location.pathname+"']"))
{
var $parentUl = $link.parent().parent();
$parentUl.slideDown("fast");
        $link.next().slideDown("fast");
}
 if ($link = jQuery(".left-column>ul>li>a[href='"+location.pathname+"']"))
{
var $parentUl = $link.next();
$parentUl.slideDown("fast");
}
if ($link = jQuery(".left-column>ul>li>ul>li>ul>li>a[href='"+location.pathname+"']"))
{
        $link.parent().parent().prev().parent().parent().slideDown("fast");
$link.parent().parent().slideDown("fast");
}
});

Где slideDown("fast") - это элемент подключенной библиотеки TMSlider. Также можно при необходимости использовать slideUp.

Можно реализовать такое меню и без библиотеки TMSlider, для этого вместо slideDown("fast") пишем addStyle("display:block;"). Однако в таком случае оно будет раскрываться не плавно, а мгновенно.

Здесь показана работа для трех уровней вложенности меню.