<nav \/><\/code> Tag is one of the new elements introduced in the HTML5 Specification<\/a>, this element represents a part of your document that contains links to parts of the page or to other pages.<\/p>\nA section with navigation links.<\/p><\/blockquote>\n
If the navigation links is a list of links, simply use the <ul\/> <li><\/code> tags to create the list, but as the specification say:<\/p>\nA nav<\/code> element doesn’t have to contain a list, it can contain other kinds of content as well.<\/p><\/blockquote>\nLet’s see an example.<\/p>\n
1.1 Simple Navigation Example<\/h3>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title>HTML5 Navigation Bar Example - Example 1<\/title>\r\n<\/head>\r\n<body>\r\n <nav>\r\n <ul>\r\n <li><a href="home.html">Home<\/a><\/li>\r\n <li><a href="blog.html">Blog<\/a><\/li>\r\n <li><a href="news.html">News<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAs you can see it looks like any other lists :<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/ex1.png\")
<\/a>HTML 5 Navigation Bar Example 1<\/figcaption><\/figure>\n1.2 Adding some CSS<\/h3>\n
As we want to create a navigation bar we will add some CSS to the page to present the list as a navigation bar.<\/p>\n
First of all we define the default body styling :<\/p>\n
\r\nbody{\r\n margin: 0;\r\n padding: 0;\r\n font-size: 15px;\r\n}\r\n<\/pre>\nThen we create the “navbar style” :<\/p>\n
\r\nnav {\r\n background-color: #333;\r\n margin: 0;\r\n overflow: hidden;\r\n}\r\n<\/pre>\nAnd now we can add some style to the list element :<\/p>\n
\r\nnav ul{\r\n margin: 0;\r\n padding: 0;\r\n}\r\nnav ul li {\r\n \/* This allow us to arrange list items in a row, without using float *\/\r\n display: inline-block;\r\n list-style-type: none;\r\n}\r\n\r\n\/* Create a style for the first level items *\/\r\nnav > ul > li > a {\r\n color: #aaa;\r\n background-color:#FF0;\r\n display: block;\r\n line-height: 2em;\r\n padding: 0.5em 0.5em;\r\n text-decoration: none;\r\n}\r\n<\/pre>\n![\"HTML5](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/ex1-2.png\")
<\/a>HTML5 Navigation Bar Example 1 bis<\/figcaption><\/figure>\n2. Adding sub level<\/h2>\n
Now we will add some sub menus to the navigation bar. Let’s see the HTML code :<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title>HTML5 Navigation Bar Example - Example 1<\/title>\r\n<\/head>\r\n<body>\r\n<nav>\r\n <ul>\r\n <li>\r\n <a href="home.html">Home<\/a>\r\n <ul>\r\n <li><a href="presentation.html">presentation<\/a><\/li>\r\n <li><a href="contact.html">contact<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="blog.html">Blog<\/a><\/li>\r\n <li>\r\n <a href="shop.html">shop<\/a>\r\n <ul>\r\n <li><a href="candy.html">candy<\/a><\/li>\r\n <li><a href="chocolate.html">chocolate<\/a><\/li>\r\n <li><a href="icecream.html">ice cream<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="news.html">News<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nIf you try to display the navigation just now, this will not look as expected, we need to add some CSS to manage the submenus :<\/p>\n
\r\nnav li > ul li{\r\n display: block;\r\n}\r\n\r\nnav li > ul li a {\r\n color: #111;\r\n display: block;\r\n line-height: 2em;\r\n padding: 0.5em 2em;\r\n text-decoration: none;\r\n}\r\n\r\n\/* Change the background color when mouse over items *\/\r\nnav li:hover {\r\n background-color: #666;\r\n}\r\n\/* display the submenu on mouse over main menu item*\/\r\nnav li:hover > ul{\r\n position:absolute;\r\n display : block;\r\n}\r\n<\/pre>\nThe pseudo selector :hover<\/code> allow us to display submenus when the mouse is hover the main menu item.<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/ex2.png\")
<\/a>HTML 5 Navigation Bar Example 2<\/figcaption><\/figure>\n3. Third level menu<\/h2>\n
Imagine now you want to create a third level menu, and we want it to be shown on the right of menu item.<\/p>\n
So we have to edit the HTML to add some submenu in one or more second level menu element…<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title>HTML5 Navigation Bar Example - Example 1<\/title>\r\n <link href="style3.css" rel="stylesheet"\/>\r\n<\/head>\r\n<body>\r\n<nav>\r\n <ul>\r\n <li>\r\n <a href="home.html">Home<\/a>\r\n <ul>\r\n <li><a href="presentation.html">presentation<\/a><\/li>\r\n <li>\r\n <a href="contact.html">contact<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href="blog.html">Blog<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li>\r\n <a href="shop.html">Shop<\/a>\r\n <ul>\r\n <li>\r\n <a href="candy.html">candy<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="chocolate.html">chocolate<\/a><\/li>\r\n <li>\r\n <a href="icecream.html">ice cream<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="news.html">News<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAnd we also have to edit the CSS by adding the following code:<\/p>\n
\r\nnav li > ul > li ul {\r\n display: none;\r\n background-color: #888;\r\n}\r\nnav li > ul > li:hover > ul {\r\n position:absolute;\r\n display : block;\r\n margin-left:100%;\r\n margin-top:-3em;\r\n}\r\n<\/pre>\nThis will create something like this …<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/ex3.png\")
<\/a>HTML 5 Navigation Bar Example 3<\/figcaption><\/figure>\nWithout any modification if you add some submenus (in the third level one) you will have something like this :<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/ex3-1.png\")
<\/a>HTML 5 Navigation Bar Example 3 bis<\/figcaption><\/figure>\nOk, now I would like to add some little icons to elements that have sub elements.<\/p>\n
4. Drop down icon<\/h3>\n
In order to add some arrows to menu item (they will inform the user that the element contains a submenu), we will add a class sub<\/code> to all those elements.<\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<head lang="en">\r\n <meta charset="UTF-8">\r\n <title>HTML5 Navigation Bar Example - Example 1<\/title>\r\n <link href="style4.css" rel="stylesheet"\/>\r\n<\/head>\r\n<body>\r\n<nav>\r\n <ul>\r\n <li class="sub">\r\n <a href="home.html">Home<\/a>\r\n <ul>\r\n <li><a href="presentation.html">presentation<\/a><\/li>\r\n <li class="sub">\r\n <a href="contact.html">contact<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li class="sub">\r\n <a href="three.html">Three<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class="sub">\r\n <a href="blog.html">Blog<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <li class="sub">\r\n <a href="shop.html">Shop<\/a>\r\n <ul>\r\n <li class="sub">\r\n <a href="candy.html">candy<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li class="sub">\r\n <a href="three.html">Three<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li class="sub">\r\n <a href="three.html">Three<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="chocolate.html">chocolate<\/a><\/li>\r\n <li class="sub">\r\n <a href="icecream.html">ice cream<\/a>\r\n <ul>\r\n <li><a href="one.html">One<\/a><\/li>\r\n <li><a href="two.html">Two<\/a><\/li>\r\n <li><a href="three.html">Three<\/a><\/li>\r\n <\/ul>\r\n <\/li>\r\n <\/ul>\r\n <\/li>\r\n <li><a href="news.html">News<\/a><\/li>\r\n <\/ul>\r\n<\/nav>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAnd in the CSS, we will add only two directives :<\/p>\n
\r\nnav ul > li.sub{\r\n background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;\r\n}\r\n\r\nnav ul > li.sub li.sub{\r\n background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;\r\n}\r\n<\/pre>\nImages are from the Google Design<\/a> page.<\/p>\nThis will create something like this :<\/p>\n![\"HTML](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/ex4.png\")
<\/a>HTML 5 Navigation Bar Example 4<\/figcaption><\/figure>\n5. Download<\/h2>\n