Многоуровневое меню

Задача: создать многоуровневое меню (3 уровня), первый уровень которого будет представлять название категории товара.

Каркас nav.pug

ul
  each item,index in NAV
    li(class=index == 1 ? 'active':'')
      +link("#",item.level)
      a.open-submenu(href="#")
      if item.subnav.length > 0
        ul.sub__nav
          for level1,index in item.subnav
            li
              ul: li(class=level1.subnav.length > 0 ?'parent':'')
                a(href="#")= level1.level
                if level1.subnav.length > 0
                  +link("#").nav-toggler
                  ul
                    for level2,index in level1.subnav
                      li(class=level2.subnav.length > 0 ?'parent':'')
                        +link("#",level2.level)
                        if level2.subnav.length > 0
                          +link("#").nav-toggler
                          ul
                            for level3,index in level2.subnav
                              li: +link("#",level3.level)

Данные для меню будем брать из nav.json

{
  "NAV": [
    {
      "level": "Акции",
      "subnav": []
    },
    {
      "level": "Техника для кухни",
      "subnav": [
        {
          "level": "Техника для кухни",
          "subnav": [
            {
              "level": "Чайники",
              "subnav": [
                {
                  "level": "С двойными стенками",
                  "subnav": []
                } ...

CSS по вкусу.


Тэги: ,