I am a bit stuck on how to section up a mega menu to use the HTML 5 outlining model.
I have created a jsfiddle to show the barebones markup (please ignore the css, it is just a brain dump for the purposes of this question) and will paste this html below as well.
My confusion hinges around the logical association of list items as compared to <section /> tags. In the html provided you will see I have only used <div />s and <ul />s for structuring the markup. If I run this through a outlining tool I get a mess of content, no clear structure. In the actual menu there are about 20 headings or so in the content areas. I have no real control over what these headings are (ie whether they are <h2 />s or <h3 />s etc).
Can anyone please give me some guidance on where to go from here. I have tried wrapping all anchors that have content within their dropdowns in <h2 /> tags, then wrapping these plus the drop content in <section/> tags. This makes the outline look correct but I am not sure if it is, in fact, correct.
I had thought I might be able to use some ARIA roles but, again, I'm confused about how this works with <section />s and headings and list items!
Any advice will be much appreciated!
Thanks
Basic html outline showing the different possible contents of the mega-menu
<nav>
<h2>Main menu</h2>
<ul>
<li class="has-mega">
Level 1 - Mix of varying content and children
<div class="mega">
<ul>
<li class="has-mega">
Level 2
<div class="mega">
<ul>
<li class="has-mega">
Level 3
<div class="mega">
<h2>Heading</h2>
<p>Any content can go here</p>
</div>
</li>
</ul>
</div>
</li>
<li class="has-mega">
Level 2
<div class="mega">
<h2>Heading</h2>
<p>Any content can go here</p>
</div>
</li>
<li>
Level 2
</li>
</ul>
</div>
</li>
<li class="has-mega">
Level 1 - Mix of children
<div class="mega">
<ul>
<li class="has-mega">
Level 2
<div class="mega">
<ul>
<li>
Level 3
</li>
<li>
Level 3
</li>
<li>
Level 3
</li>
</ul>
</div>
</li>
<li>
Level 2
</li>
</ul>
</div>
</li>
<li>
Level 1 - No drop content at all
</li>
</ul>
</nav>
Related
<header>
<div class="menu-toggler">
<div class="bar half start"></div>
<div class="bar half"></div>
<div class="bar half end"></div>
</div>
<nav class="top-nav" role='navigation'>
<ul class="nav-list">
<li>
Home
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
Experience
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="landing-text">
<h1>Ali Temel</h1>
<h6>Junior Front-End Developer</h6>
</div>
</header>
Dear Stackoverflow users,
This my very first question. I am an intended web developer. I really tried to link my sections but i cannot jump into section when i click Experience or About section. I appreciate for your help. This is an awesome community. Now i can get a chance to sign up.
https://github.com/alitemel89/personalwebsite-v1
Sincerely,
Ali
In order for anchor links to work the structure needs to be like this:
About
<div id="about">About content</div>
Check this for more fancy stuff related to this.
https://css-tricks.com/hash-tag-links-padding/
I took a look at your code. The problem is that the menu screen doesn't go away.
For example,
When you click on the #about button it goes to the about section but the problem is that your overlay doesn't go away.
-You have to make it, so on click the overlay goes away.
-Your syntax for moving sections is good no need to change that
I want to create a menu with sub-menus. After moving to the top menu, display sub menu the whole width of the page. It works, but I've problems with mobile menu. I am using bootstrap, but I can't click on links. Code select link is below div. I have to that menu. Have you any ideas, what's wrong ?
<ul>
<li>Head link</li>
<div id="submenu"><li></li></div>
<li>Head link</li>
</ul>
First and foremost, having such a reputation, I shouldn't answer these kind of questions. I am sorry for that. But in the sense of helping the OP genuinely, I am answering this question. Please do read the How to ask a question in StackOverflow.
A lot of mistakes in your code:
You cannot have <div> directly inside <ul>.
You cannot have <li> directly inside <div>.
The submenu should be a class and not an id.
All the contents of <li> should be wrapped inside <a> tag.
If you are using the Bootstrap's navigation, you need to use data-toggle attributes.
Corrected Code:
<ul>
<li>
Head link
<div id="submenu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
With data-toggle Attributes:
<ul>
<li class="dropdown">
Head link
<div id="submenu" class="dropdown-menu">
<ul>
<li></li>
</ul>
</div>
</li>
<li>
Head link
</li>
</ul>
I want two boxes with different content in them. I want them to line up at top. Default they line up with bottom http://jsfiddle.net/52VtD/9772/
How do I get them at top instead of bottom?
<ul class="list-inline">
<li class="box">
<ul>
<li>
aaa
</li>
<li>
aaa
</li>
</ul>
</li>
<li class="box">
<ul>
<li>
aaa
</li>
<li>
aaa
</li>
<li>
aaa
</li>
</ul>
</li>
</ul>
You need to vertically align the initial list items. Add the CSS (or rather, combine with the current rule):
.box{
vertical-align:top;
}
Demo Fiddle
Note that your HTML is also invalid, you need to ensure you are correctly closing each li
I have an HTML Structure which really has 2 headers: At the tippity top of the page it has some navigation items and buttons, below that is another section which holds the logo and what I would call the main navigation.
Both are sectioned off in wrappers because of full width CSS3 gradients so my structure looks something like this:
<div id="topWrap">
<div id="topNavWrap">
<nav id="utilityLinks">
<ul>
<li>Home</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav">
<ul>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
<li>Main Service Page</li>
</ul>
</nav>
</div>
</div>
My question is:
In this situation is it acceptable to wrap both of these nav elements in a header element, do I just wrap my main nav and logo in a header element, or do I wrap both in one big header element?
When using Aria, should I use role="main" on my main navigation or my main header element?
Yes, it makes sense to use header for both of these.
As header has no influence on the document outline, it’s up to you use one or several header elements; it doesn’t affect the meaning. If there is no reason not to use one element (i.e., there is no content inbetween that should not be part of header), go with one element.
The ARIA role main is for the main content of a page. Navigation is typically not the main content, unless it’s the only content and purpose of a page. However, in that case you wouldn’t use the header element, as its job is to "exclude" content that is not considered to be part of the main content.
If they are using nav elements you shouldn't simply wrap them in headers. Although you can use multiple header elements in a page, they should represent the top of a 'section', a content area.
A more suitable HTML setup would be:
<header id="topWrap" role="banner">
<div id="topNavWrap">
<nav id="utilityLinks" role="navigation" aria-describedby="utilityLinksH2">
<h2 class="at" id="utilityLinksH2">Site menu</h2>
<ul>
<li>Home</li>
...
</ul>
</nav>
<div id="quickLinks">
<ul>
<li>Login</li>
...
</ul>
</div>
</div>
<div id="headerWrap">
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<nav id="mainNav" aria-describedby="mainNavH2">
<h2 class="at" id="mainNavH2">Service menu</h2>
<ul>
<li>Main Service Page</li>
...
</ul>
</nav>
</div>
</div>
</header>
Notable points are:
wrapping the whole lot in a header, with a role of banner. which should only be used once on a page to denote site furniture at the top of the page. (When used from the body the header applies to the, see the last example in the HTML5 spec.)
Labelling each nav with a hidden sub-heading (use .at to move it offscreen), with aria-describedby.
Main should wrap the main content of the page (that is unique to the page), generally starting just above a H1. There should be only one.
I'm building a website using HTML 5 markup, but have hit a problem regarding where to place the the NAV element - because I'm using a SPRY 'Tabbed Panel' for both the navigation and the content:
<header>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
</div>
</div>
I thought the best place to insert the NAV element would be by wrapping the UL element, but this breaks the SPRY Tabbed panel (maybe I can just fix this by changing some file paths in the CSS?).
Also, seeming as the main content of the site will be held in the 'Content' areas of the tabbed panel, I'm wondering what the best approach is for building this site, with regards to NAV and ARTICLE etc, so that is semantically correct?
Perhaps I am going about this the wrong way?
I'm not familiar with SPRY, but you are probably correct in that you will need to edit the CSS if you wish to have more semantic markup.
Assuming each "tab" is it's own article, here is how I would mark this up:
<div id="TabbedPanels1" class="TabbedPanels">
<nav>
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Home</li>
<li class="TabbedPanelsTab" tabindex="0">Profile/li>
<li class="TabbedPanelsTab" tabindex="0">Contact</li>
</ul>
</nav>
<div class="TabbedPanelsContentGroup">
<article class="TabbedPanelsContent">Content 1</article>
<article class="TabbedPanelsContent">Content 2</article>
<article class="TabbedPanelsContent">Content 3</article>
</div>
</div>
It isn't a big change, but it adds at least some better semantics to the markup while still leaving the majority of the structure intact so that there don't need to be MASIVE changes to the SPRY framework code.