AntonEssential
@AntonEssential

Как написать многоуровневое меню в jade?

Подскажите как написать функцию многоуровневого меню в jade с передаче параметров и активным пунктом.
  • Вопрос задан
  • 872 просмотра
Решения вопроса 1
Zoxon
@Zoxon
Веб-разработчик
Используйте миксины данные в виде массива объектов
Если меню фиксированной вложенности можно сделать так

mixin main-menu-submenu(data)
	ul.main-menu-submenu&attributes(attributes)
		each item in data
			li.main-menu-submenu__item
				a(href="#{item.url}")= item.title


mixin main-menu(data)
	nav.main-menu.js-link-sroll&attributes(attributes)
		ul
			each item in data
				- var itemClasses = ['main-menu__item']
				//- Доп класс для пунктов с подменю
				if (item.submenu !== false)
					- itemClasses.push(itemClasses[0] + '_dropdown')

				li(class=itemClasses)
					a(href="#{item.url}").main-menu__link= item.title
					if (item.submenu !== false)
						.main-menu__submenu
							+main-menu-submenu(item.submenu)


И примерно такой структурой данных
{
	"menu": [
		{
			"title": "Level 1 title 1",
			"url": "#url1",
			"submenu": [
				{
					"title": "Submenu item 1",
					"url": "url2"
				},
				{
					"title": "Submenu item 2",
					"url": "url3"
				}
			]
		},
		{
			"title": "Level 1 title 2",
			"url": "#url4",
			"submenu": false
		}
	]
}


Если неизвестна максимальная вложенность то можно использовать рекурсию
Как написать mixin для Jade/Pug?
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AntonEssential
@AntonEssential Автор вопроса
Намутил я так думаю сильно, оно вроде и работает но я так думаю как-то можно это сделать проще, хочется выделить еще активный пункт меню на текущей странице.
Вывод на каждой странице:
- var pageId = 1;
А если есть подменю и там активный пункт, не понял как это сделать, пришлось велосипед выдумать и подставить еще одну переменную.
- var pageId = 1;
- var subId = 0;
mixin main-menu-submenu(data)
  ul.main-menu__submenu&attributes(attributes)
    each item, i in data
      if i === subId
        li.main-menu__item.main-menu__item_active
          a(href=item.url)= item.title
      else  
        li.main-menu__submenu__item
          a(href=item.url)= item.title


mixin main-menu(data)
  nav.main-menu&attributes(attributes)
    ul
      each item, i in data
        if i === pageId
          li.main-menu__item.main-menu__item_active
            a(href=item.url).main-menu__link= item.title
            if (item.submenu !== false)
              +main-menu-submenu(item.submenu)
        else
          li.main-menu__item
            a(href=item.url).main-menu__link= item.title
            if (item.submenu !== false)
              +main-menu-submenu(item.submenu)

Вот это не совсем понятно в шреве:
a(href="#{item.url}")
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы