Would it be semantically correct to use an aside element inside of a nav?
I am creating a drop down mega menu on an ecommerce site, which will have an area on the side of the drop down that will be used to promote a particular product.
This isn't strictly part of the hierarchal navigation, but will be related to the parent in the navigational tree.
Similar to below:
<nav>
<ul>
<li>Link 1
<div class='mega-menu'>
<ul>
<li>child link</li>
<li>child link</li>
<li>child link</li>
</ul>
<aside>
/* Promo content in here */
</aside>
</div>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
In this circumstance would it be correct to use an aside?
Thanks in advance for any advice, cheers.
Using an aside element into a nav element is permitted as you can see in the following link https://developer.mozilla.org/en/docs/Web/HTML/Element/nav where it is said : Permitted content : Flow content.
If you open the flow content page, you can see that an aside element is effectively a flow content : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content
Related
I am looking for a Side Nav with multilevel items. By default zurb foundation 5 does not support sub menus for some reason.
http://jsfiddle.net/pvG7V/1/
<ul class="side-nav">
<li>Link 1
</li>
<li>Link 2
</li>
<li class="divider"></li>
<li>Link 3
</li>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
</ul>
<li>Link 4
</li>
</ul>
Can this be changed to support submenus with an indicator for sub menu like an down arrow or + sign.
To do that, you have to change the side-nav markup and add some css and js.
New markup (the sub ul must be added ass li child and not ul.side-nav child) :
<ul class="side-nav">
<li>Link 1
<ul> <!-- added ul inside of li -->
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
JS
$('.side-nav li:has("ul")').children('ul').hide(); //hide submenu
$('.side-nav li:has("ul")').addClass('hasChildren'); // add class to li ul child
$('.side-nav li:has("ul")').click(function(){
$(this).toggleClass( "active" ) // add active class to clicked menu item
$(this).children('ul').slideToggle(); //toggle submenu
});
CSS
.hasChildren:before{
content: "+";
float: left;
}
.hasChildren.active:before{
content: "-";
}
http://codepen.io/mouhammed/pen/vcnCb
I was having this same problem, and came across a new solution.
Foundation now has a generic drop down component so that you can add drop down functionality to any element.
So what I did was create the regular side nav, and then add dropdowns to each item. Dropdowns can be customized to dropdown in directions other than just down, like up, left, and yes even to the right. It is also possible to make it appear on hover.
<ul class='side-nav'>
<li>
Menu Item 1
<ul id="dropdownid1" class="f-dropdown" data-dropdown-content>
<li>
Sub Menu 1-1
Sub Menu 1-2
Sub Menu 1-3
</li>
</ul>
</li>
</ul>
so by setting the data-options in the initial a element to "align:right", it will dropright instead of dropdown. you can also set "is_hover:true" for hover mode
to use both use a semicolon in between.
the data-dropdown value in the a element must match the id of the ul element, and i believe the ul can be placed anywhere else you want, though i like to keep it under the element it is dropping down from.
for more info checkout the foundation docs
http://foundation.zurb.com/docs/components/dropdown.html#
I'm trying to make it so when I click on the href "+ links", my list of links updates to my other list of links.
Is it possible to do this using only html and css? I am looking for documentation on this but I haven't find anything, so I guess I'm looking for a little help.
<footer id="footer-container">
<section id="footer1">
<ul>
<h1>Links</h1>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li> + links </li>
</ul>
<ul>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>+ links</li>
</ul>
</section>
</footer>
Simple answer: Not Possible.
CSS & HTML cannot change state via clicks. You can achieve changing which list is shown when the user hovers over something, but you cannot do this when a user clicks something.
EDIT: To respond to your comment about jQuery:
$('#myID').click(function{
Put your changes here. The above line will trigger when a user clicks on an element with the id of myID.
You could accomplish the menu change by hiding and showing:
$('ul#firstList').hide();
$('ul#secondList').show();
You'll need to use an if/else statement to see which list is currently visible though.
});
I have the following structure for navigation:
Models
Model 1
Model 2
Model 3
Model 4
I would like to use the nav tag since this is the main navigation on the site
I cant also decide about what tag "Models" should be in. Is it a title within a nav tag - im not sure thats correct?
I therefore have the following so far but am unhappy with it - particularly the title part:
<nav>
<h1>Models</h1>
<ol>
<li>Model 1
<li>Model 2
<li>Model 3
<li>Model 4
<li>Model 5
</ol>
</nav>
If Models itself is part of the navigation you should nest <ul> list within it.
<nav>
<ul>
<li>
Models
<ul>
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
<li>Model 4</li>
<li>Model 5</li>
</ul>
</li>
<li>
Products
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
<li>Product 5</li>
</ul>
</li>
</ul>
</nav>
Your markup is the correct markup! Since "models" is the title of the list, this is the correct placement of the <h1> element. The only thing I would change is <ol> to <ul>.
You can read more about menu's in this article at the bottom. http://diveintohtml5.info/semantics.html
<nav>
<h1>Models</h1>
<ul>
<li>Model 1
<li>Model 2
<li>Model 3
<li>Model 4
<li>Model 5
</ul>
</nav>
Talking about semantics, your h1 as a main title should be outside of your nav, or change it by a h2 or p, because main title it is not part of navigation.
about navigation, it should be something like this:
<header>
<h1>title</h1>
<nav>
<h2>Models</h2>
<ul role="navigation">
<li>Model 1</li>
<li>Model 2</li>
<li>Model 3</li>
<li>Model 4</li>
<li>Model 5</li>
</ul>
</nav>
</header>
Don't forget aria roles to indicate browsers what things are.
Hope you find it useful.
nav is a sectioning element. If you don’t provide a heading for a sectioning element, the outline algorithm creates an implicit/undefined heading.
So if "Models" correctly describes these navigation links (and it seems that this is the case), it’s good to use it as heading. You can use h1 or the corresponding heading level h2-h6 (depending on where your nav is placed in the outline).
Using a list for the links itself is good, too. However, typically you’d want to use a ul instead of a ol here. Only use ol if the order of the links is meaningful and visitors should visit the pages in that (and no other) order. If they are simply sorted alphabetically, that doesn’t qualify for ol.
So I’d go with:
<nav>
<h1>Models</h1>
<ul>
<li>Model 1
<li>Model 2
<li>Model 3
<li>Model 4
<li>Model 5
</ul>
</nav>
I am using the Zurb Foundation 4 framework for my site. I want to have a navbar that is positioned beneath a header that sticks to the top of the page when you scroll past. This works fine, except that the page content jumps up ~45 pixels when the Top Bar sticks to the top of the page. The effect can be seen on this page, though this is a different navigation element: http://foundation.zurb.com/docs/components/magellan.html
Is there some way to fix this, or do I have to change my site design to accomodate this bug?
The documentation is here: http://foundation.zurb.com/docs/components/top-bar.html
<div class="contain-to-grid sticky">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Top Bar</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">Item 1
<ul class="dropdown">
<li><label>Level One</label></li>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li class="divider"></li>
<li>Sub-item 3</li>
<li class="has-dropdown">Sub-item 4
<ul class="dropdown">
<li><label>Level Two</label></li>
<li class="has-dropdown">Sub-item 1
<ul class="dropdown">
<li><label>Level Three</label></li>
<li class="has-dropdown">Sub-item 1
<ul class="dropdown">
<li><label>Level Four</label></li>
<li>Sub-item 1</li>
</ul>
</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li class="divider"></li>
<li>Sub-item 4</li>
</ul>
</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
<li>Sub-item 4
</ul>
</li>
<li>Sub-item 5</li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider hide-for-small"></li>
<li>Item 2</li>
</ul>
</section>
</nav>
This appears to be a hard-coded "feature" in Foundation 4's Javascript. Instead of merely preventing the default behavior of the link, it automatically forces the link to redirect to #, which causes the browser to jump to the top of the page. This appears to be intentional (more on that in a second).
The only alternative for now is to just not use the Top Bar component and create your own navigation using other, more reliable Foundation components. For instance, you can build your own navigation easily enough using both the .sticky class and simply defining a fresh <nav> element with all necessary <ul> menu items within.
The Top Bar has a very specific use by design... clicking "Menu" will use Javascript to reveal the navigation as a single column of options under the Top Bar. To ensure that mobile users can scroll a big set of options, this jumps the window to the top of the page and removes the fixed behavior until you close the menu. This works well enough when your Top Bar starts at the top of the page, but has serious implications when it doesn't (for instance, scrolling to the top of the page might move the menu out of view).
Now, this is purely opinion... but I'm really not a fan of Foundation's Top Bar implementation. Usability tests have shown that putting your mobile menus in the footer and linking to them with an anchor are more efficacious and user-friendly. You can use .hide-for-small to hide your desktop menu items and .show-for-small to reveal your own custom, anchored "Menu" link... that menu link would anchor to a mobile-specific menu in your footer (which again, you would reveal with .show-for-small).
Long story short: Top Bar is sloppy from a usability standpoint and broken (by design) for your use-case. I'd recommend building your own sticky menu :-)
This issue was fixed: https://github.com/zurb/foundation/issues/1993
Answer:
If you don't want it to jump to the top specify in data-options:
<nav class="top-bar" data-options="scrolltop: false">
or on initialization:
$(document).foundation('topbar', {scrolltop: false});
Remove the "sticky" class if you don't need it. Worked for me.
On this page: https://github.com/jordanmerrick/foundation/commit/47391710c7b6d30ad54e50f3b2526cb8f6184be1
I found the code in foundation.topbar.js that adds padding to the body tag depending on whether top-bar is sticky or not:
if ($('.sticky').length > 0) {
var distance = $('.sticky').length ? $('.sticky').offset().top: 0,
$window = $(window);
var offst = $('nav.top-bar').outerHeight()+20;
(".sticky").after("<div class='top-bar-sticky-padding'></div>");
$window.scroll(function() {
if ( $window.scrollTop() >= ( distance ) ) {
$(".sticky").addClass("fixed");
- $('body').css('padding-top',offst);
}
else if ( $window.scrollTop() < distance ) {
$(".sticky").removeClass("fixed");
- $('body').css('padding-top','0');
}
});
}
I'm not a javascript wizard - but it seems as if instead of setting offst to the height of the .top-bar, you set it to the value of .top-bar-sticky-padding directly, you can control the offset with a media query instead of forcing an offset the size of the top-bar.
Am I wrong? I'm nervous about "hacking core" but this seems to have solved the problem for me.
I am trying to have a header inside an UL
since you cant have H2 inside a UL
is it ok if use it the way i shown?
<ul>
<li class="head">News roll </li>
<li>News 1</li>
<li>News 2</li>
</ul>
I was told by one of my friend, its not a proper way to do it and he apparently doesn't know the reason.
Yes, it is fine.
As for your structure, maybe you want to use the h2 tag outside of the ul? (Assuming it's going to be a header for that list).
<h2>News Roll</h2>
<ul>
<li>News 1</li>
<li>News 2</li>
</ul>
Its a perfectly valid html. You can't put any tag inside a <ul> though, it has to be directly followed by an <li>. You can however, put any block level element inside the <li>. So you can have H2 inside li.
As far as your friend is considered, he is wrong.