e powers of html5 are really amazing. there was a time when you needed jquery to make a superb navigation bar, but not anymore. a pure html5 dropdown menu can sufficiently deliver the best user experience. today’s post is about creating such html5 menu bars and navigation bars.
an html5 dropdown menu can be requirement of any website. single-story menus sometimes are not enough and we need a dropdown menu. thankfully, html5 has the power to create the most useful menus.
this post contains tutorial to create and edit an html5 dropdown menu, and a list of 20 best html5 menu bars that you can use in your website.
how to edit an html5 dropdown menunote: this section of for beginning web designers, if you are already well-versed at html/css, feel free to skip ahead.
when we say pure html, what we mean is that it does not include javascript. it does not mean that we are negating css.
the basic difference between javascript menus and pure html menus is that pure html menus are 100 per cent readable for search engines, so they give high seo value. and these days, html5 and css3 has given enough transitions and effects to make the coolest navigation bars without requiring javascript or jquery.
understanding coding method
html: i can’t define all the functions, as that will take too much time but i’m describing the basic structure of an html5 navigation bar.
<nav>
?<ul>
?<li><a class=main href=#>option 1</a></li>
?<li><a class=main href=#>option 2</a></li>
?<li><a class=main href=#>option 3</a></li>
?<li><a class=main href=#>option 4</a></li>
?</ul>
</nav><nav> is the basic tag in which we put all the navigation bar. rest is just <ul> which means unordered list and <li> which means list item.
for creating a multi-level menu, we just add another unordered list inside a list item. here’s the example.
<nav>
?<ul>
?<li><a class=main href=#>option 1</a></li>
?<li><a class=main href=#>option 2</a>
?<ul>
?<li><a class=sub href=#>sub-option 1</a></li>
?<li><a class=sub href=#>sub-option 2</a></li>
?<li><a class=sub href=#>sub-option 3</a></li>
?</ul>
?</li>
?<li><a class=main href=#>option 3</a></li>
?<li><a class=main href=#>option 4</a></li>
?</ul>
</nav>of course, this is the just the tip of the iceberg, but you know the basics now. time to check out css.
css: css is pretty simple and straightforward. that’s because the same set of commands can be applied anywhere, so if you know how to apply border at an image, you can apply border to anything. this is why i’m not putting down any specific properties, i’m just describing the basic css structure of a dropdown menu.
first thing we need to do is establish that all sub-menus must remain hidden unless they have the pointed on them. here’s the css for them.
nav ul ul {
?display: none;
}
?nav ul li:hover > ul {
?display: block;
?}now set the properties of everything else.
nav ul {
?styling properties for main bar
}nav ul li {
?float: left;
}
?nav ul li:hover {
?hover styling properties here
?}
the process carries on like this. i’m sure you get the picture now. if you still need any help, you can use the comments section below. i’ll be glad to help.
share this article on twitter
pure html menu barscreating html/css only horizontal navigation
even though this is a very simple design, this is very powerful, customizable and seo friendly navigation bar. if you are a beginner, you should start from this menu.
live demo | download
adv