I have this weird thing happening to me.
I have a menu and I try to create a mega menu.
I`m adding a ul in anchor tag to create the mega menu but it s pushed out of it. Anyone know why?
HTML:
<ul class="header_menu">
<li>
<a href="#">
Menu 1
<ul class="sub_menu">
<li>Submenu 1</li>
</ul>
</a>
</li>
and check this picture of html using view source.
image using view source
The ul sub_menu is pushed out of the anchor and its placed near it, not as a parent of anchor tag.
Any ideas?
EDIT:
As Quentin said, and according to w3c "Nested links are illegal".
A more detailed explanation here:
https://www.w3.org/TR/html401/struct/links.html#h-12.2.2
Your HTML is invalid.
See The a element:
Content model: Transparent, but there must be no interactive content descendant.
You cannot have a link as a descendant of another link.
If you remove the nested link, then the problem goes away:
You probably want "Menu 1" to be a link and "Submenu" to be a different link. So end your first link before the nested list.
Related
I have a primary navigation where some items can contain a secondary nav. I would like to make my webiste as accessible as possible so I'm looking for the best solution to show/hide the secondary nav.
What I've come up with is:
the user gets to the <a> tag with a secondary nav with TAB & hits enter
the secondary nav opens up
if they hit enter on the primary <a> tag again, they get redirected to that page
if they hit TAB, they go to the first item in the secondary nav
I've already accomplished this using javascript. What I would like to know is whether there is a better approach to this & also:
I've added aria-controls and aria-expanded attributes to the primary navigation <a> tags. Is that semantically correct?
This is what the simplified markup looks like:
<nav>
<ul>
<li>
Home
</li>
<li>
Other page
<nav>
<ul id="secondary-nav">
<li>
<a></a>
</li>
<li>
<a></a>
</li>
<li>
<a></a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
Interestingly, the ARIA standard supports aria-expanded (and consequently aria-controls) on the link role. But it does have this to say as well:
If pressing the link triggers an action but does not change browser focus or page location, authors are advised to consider using the button role instead of the link role.
Since at first press the <a> will neither change focus, nor page location, it should be a button at the start. You could achieve that by adding role="button".
It might become a link when pressed, but changing role and behaviour of an element is disorienting for a lot of people and I’d expect especially for users with cognitive disabilities.
Disclosure Navigation Menu Pattern
So I would recommend sticking to established patterns, like the Disclosure Navigation Menu
It clearly separates the disclosure button from the links, which is way easier to understand.
What to do with index pages
I am assuming that your solution comes from a menu design that originally did not take into account keyboard and touch interactions, but only mouse, where hovering opens the submenu, and clicking the link.
The pattern that I used most of the time to solve that issue is adding a link to the index page in the submenu, and name it the same as the button, or “Overview”, as they did in the example posted above.
For you, that would result in
Other page
Overview
…
I'm building a progressive web app that outputs data onto the pages via an API. For example, there could be one page called about us and in about us could have history, location, etc... for its sub nav. Here are a couple of examples as to what I mean:
When on the health & wellbeing page
When on the about us page
The issue that I am having is because the about us links are contained in a UL element that is contained in the about us LI element, it positions the sub nav to start directly underneath it and not underneath where the logo is.
Here is the structure of the HTML code that populates the navigation, based on when visiting the about us page.
<ul>
<li id="nav-1">
Home
</li>
<li id="nav-2" class="open-two">
Health & Wellbeing
</li>
<li id="nav-13" class="open-two">
About Us<span><i class="arrow down"></i></span>
<ul class="level-two" style="display: grid;">
<li>About Us Home</li>
<li id="nav-8">
History
</li>
</ul>
</li>
</ul>
Now I did try using margin-left:-346px; on the level-two UL element, which produced the following examples:
When on the health & wellbeing page
When on the about us page
Looks better on the health & wellbeing page, but then I realised after seeing the about us page that margin-left:-346px; didn't really fix the issue due to it only moving to the left a certain number of pixels.
So my question is, how do I get the dynamic sub nav to start underneath the logo and not start underneath its parent nav item so it turns out like the third image?
Update: Here is another example of what I am referring to https://jsfiddle.net/hkctdpqn/1/
I figured it out. I had to make the position of the parent UL element relative and make the position of the level-two UL element absolute. Then I adjusted the margin-left value until they all started underneath the logo and not to their parent elements.
I am trying to write a theme with multi menu at the header, should i use multi nav tag for each of them? Or wrap them all inside a nav tag?
Here is the example codepen.
header-a wrap everything inside nav tag.
header-b wrap menu and the element that between menu inside nav.
header-c wrap menu inside nav by each.
header-d add nav tag inside each bar to wrap everything inside bar.
Which method will be good in this case?
Thank you so much.
I think this is about semantics.
A nav element should wrap items that are part of the same navigation structure.
For example:
<nav id="topNav">
<ul>
<li><a>Home</a>
</li>
<li><a>About</a>
</li>
<li><a>Contact</a>
</li>
</ul>
</nav>
<nav id="sideNav">
<ul>
<li>Products</li>
<ul>
<li><a>Oranges</a>
</li>
<li><a>Apples</a>
</li>
<li><a>Pears</a>
</li>
</ul>
</ul>
</nav>
<nav id="socialNav">
<ul>
<li><a>Facebook</a>
</li>
<li><a>Twitter</a>
</li>
<li><a>LinkedIn</a>
</li>
</ul>
</nav>
See this article
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.
Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
It does not seem there is an exact answer to this. Rather, the correct answer depends on how you want the semantics of the website to be read.
Try looking at the following sources:
http://html5doctor.com/nav-element/
https://stackoverflow.com/questions/14100279/html5-semantics-for-multiple-nav-
elements
http://w3bits.com/css-responsive-nav-menu/
There is information that states that all 4 of your options would be semantically correct. What you need to think about is how you want the navigation to be interpreted: 1) Should it be seen as one main menu? Then you would want header-a; 2) Should the menus be seen as groups of related menus? Then any of header-a, header-b or header-c would work.
I know I have not exactly given you an answer to your question but from what I can work out there is no straight forward answer.
Hope this helps in some way.
I'm not sure why, but there are two little dashes next to two of my tabs and they're shifting everything right. It's not effecting the third tab.
Here is a JSFiddle and images
`http://jsfiddle.net/michaelhorstman/wL0ubv50/`
Bro, in list style, there's no end anchor tag. try to add</a> in the each list end
looks like I was missing closing anchor tags on my list items in the header!
`<li> Hello </li>
<li> This </li>
<li> Test </li>`
Fixed it!
Ive got the following code:
<ul>
<a href="./index.php?profile=User1">
<li>User1 : 16</li>
</a>
<a href="./index.php?profile=User2">
<li>User2 : 4</li>
</a>
</ul>
This works perfectly fine in all major browsers, but it isn't allowed/invalid HTML and the right way should be this:
<ul>
<li>
User1 : 16
</li>
<li>
User2 : 4
</li>
</ul>
But if I do it like the second example only the text not the whole <li> is clickable like i want it to.
Should I stay with the invalid working version or has anyone a better solution?
Use CSS to make the link take up the entire list item, eg. display: block (and any other styling you might want).
Wrapping links around list items is invalid HTML.
Short answer is NO, it won't be validated, only li can be inside ul and ol elements.
So this is incorrect
<ul>
<a><li></li></a>
</ul>
This is fine
<ul>
<li><a></a></li>
</ul>
Anchor tag is inline element so make it block using display:'block' so that it will take full width of its parent i.e. li tag
The second way around is the correct way to do it, you just have some minor styling issues.
If you set the <li>'s to have no padding and the <a>'s to have no margin, the links will fill the entire area of the list item.
You have to use the valid way.
And set the "a" tag with :
display: block
http://jsfiddle.net/TYVV6/1/
And if you don't want to show the points at the beggining of the list elements.
You'll have to use :
list-style: none;