Can't nest links in html5?
In xhtml I usually nest lists, close the tag then begin a new before the closing tag. This technique makes a the list structure clear when rendered without any css and it's a convenient structure for applying JS to.
Today I come up against a problem nesting links in a html5 document:
<header>
<nav>
<a href="#">A link</a>
<a href="#">A link
<ul>
<li><a href="#">nested link</a></li>
<li><a href="#">nested link</a></li>
<li><a href="#">nested link</a></li>
</ul>
</a>
</nav>
</header>
Which doesn't work. The nested list is nested in another a tag.
So a technique I used regularly in xhtml doesn't w开发者_如何学Goork in html5. My question is what do you do in the situation where you want to create a flyout menu? Is there a technique I can use in html5 to make it as easy as it is in xhtml? I know I can create this flyout menu without nested links but I liked the conciseness of the old method.
Build your menu structure in nested lists, and have the first element in every list be a link. Works just fine and you can make it look right in CSS.
I never want to make a flyout menu, but if a client cannot be convinced otherwise then:
- The list of links at the top level would be represented as a list, not a bunch of anchors directly under the nav element
- I would structure the DOM so a submenu would be represented as a list that appeared after a link, and not inside it.
- I would use JavaScript to handle the opening/closing since
:hover
is inadequate as it:- doesn't work with keyboard access or
- allow time to pass after the point leaves the menu before closing it (it is hard not to wobble across the edges for some people, e.g. those with arthritis)
精彩评论