Древовидное меню на javascript

Древовидное меню — достаточно часто встречающийся виджет.

Недавно передо мной встала задача сделать такое меню. Можно было использовать один из уже готовых, но хотелось написать свой плагин для jQuery

Код treemenu.js
Подключение:

  1. Подключаем jquery
    <script src="jquery.min.js" type="text/javascript"></script>
  2. теперь сам плагин и стили:
    <script src="jquery.treemenu.js" type="text/javascript"></script>
    <link href="jquery.treemenu.css" rel="stylesheet" type="text/css" />
  3. создаём структуру меню ul > li > a:
    
    <ul id="fruits">
        <li><a href="/or">Апельсин</a></li>
        <li><a href="/ap">Яблоко</a></li>
        <li><span>Прочие</span>
            <ul>
                <li><a href="/wm">Арбуз</a></li>
                <li><a href="/bn">Банан</a></li>
                <li><a href="/kw">Киви</a></li>
            </ul>
        </li>
    <ul>
    
  4. "натравливаем" на эту структуру плагин:
    $(function(){
      $("ul#fruits").treemenu();
    });
    

Должно получиться что-то вроде этого

blog comments powered by Disqus
π