Here is the code
- var list = [1, 2, 3, 4, 5]
.navbar.clearfix
a.logo(href="#") Logo
div.links
each i in list
a(href="#")= 'Link ' + i
.sub-menu
each i in list
a(href="#")= 'Link ' + i
The problems are the .sub-menu is not in the a element, and there is an extra blank 'a' in .sub-menu.
Is it possible to create a multi level iteration in pug? Thanks
HTML forbids nesting interactive elements. You cannot place a link within another link.
The tranditional markup for a series of menus with submenus is nested lists:
<ul> <!-- Top level menu -->
<li>
<a href="..."> Top level link </a>
<ul> <!-- Sub menu -->
<li>
<a href="..."> Sub menu link </a>
</li>
</ul>
</li>
</ul>
There are some restrictions of what you elements you can put inside of some elements. You can't have a div inside of a p element.
This is to ensure the markup remains as semantic as possible. Who would need a DIV element inside of a PARAGRAPH? Even in the general sense we don't see any meaning of having a div in a p, div is a block level element and a element can only contain elements which are not initially block elements. I've interestingly found that you can have 1 level of nesting of DIV in an anchor element and it will work, but other than that it will break.
Use span element inside of an anchor element and then use CSS to make it a block level element, the nesting should work completely fine with span inside of an anchor element.
This document may be helpful in understanding which elements plays well with which ones - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content
I've found that this is not an issue of pug, but behaviour of browsers.
code like this
<a>11
<div>22
<a>33</a>
</div>
</a>
won't nest as expected. At the moment, I replace tag a with div and emulate links with css. Still curious about this.