HTML5

HTML5 Dropdown menu example with CSS3

EDITORIAL NOTE: In this post, we feature a comprehensive HTML5 Dropdown menu example with CSS3. A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

Introduction

The web has evolved into something more than just linked documents; pages behave increasingly these days like apps. Even a few years ago we would be looking at using JavaScript to create interactive, attractive menus.

With HTML5 and CSS3 now standard in most modern browsers, web developers can easily and quickly create attractive and responsive menus. Today we will  see how we can leverage HTML5 and CSS3 to create a simple navigation menu.

Here’s a screenshot of what we’ll be creating in this tutorial:

HTML5 dropdown Menu screenshot
HTML5 Menu screenshot

This following browser  versions or higher are supported by this example

  • Google Chrome 6.0
  • Internet Explorer 9.0
  • Mozilla Firefox 4.0
  •  Safari 5.0
  •  Opera 11.1

HTML

HTML5 has many new elements/tags for creating navigation menu like <menu> & <menuitems>. Owing to lack of support in major browsers for these new elements <menu> & <menuitems> we will be using the <nav>.

An important part of creating a site navigation is understanding that the navigation is a list of links around your site which means that we will use an unordered list to store your links, not a table! We will also see how we can use the html character code (&raquo;) to our advantage. Alternately, you can use a image to display as arrow.

The <head> html tag act as container to include the title,scripts , meta information and also link the  relevant external resource. The <meta> tag is used to provide metadata about the HTML document. It will not be displayed on the page, but will be used by browsers , search engines , or other web services.We will use the <link> tag to link the external style sheet which is preferred approach as  you can change the look of an entire site by changing one file and also helps in promoting reuse from architecture standpoint.

&lt;head&gt;
&nbsp;&nbsp; &nbsp;&lt;title&gt;HTML5 / CSS3 Navigation Menu&lt;/title&gt;
&nbsp;&nbsp; &nbsp;&lt;meta charset="UTF-8"&gt;
&nbsp;&nbsp; &nbsp;&lt;meta name="description" content="Free Web tutorials"&gt;
&nbsp;&nbsp; &nbsp;&lt;meta name="keywords" content="HTML,CSS"&gt;
&nbsp;&nbsp; &nbsp;&lt;meta name="author" content="WebCodeGeeks.com"&gt;
&nbsp;&nbsp; &nbsp;&lt;link rel="stylesheet" href="MenuStyle.css"&gt;
&lt;/head&gt;

Although not mandatory, it’s always a good practice to assign an id in your the <div> and <nav> element so that you can refer them in in your scripting.

&lt;body&gt;
&lt;div id="wrapper"&gt;

The <div> tag defines a division or a section in an HTML document and group them together. The<nav> element is new in HTML5 and defines a set of navigation links and support the Global and Event Attributes in HTML. We will use the <ul> tag  in conjunction with the <li> tag to create unordered lists  of menu and submenu. For simplicity we have added only one level of submenu. In reality, you can add as many as you want by adding a

&lt;li&gt;&lt;a href="#" &gt;YourNewMenu Item&lt;/a&gt;&lt;/li&gt;

under <ul> element. You would like to replace the “#” in the href attribute to a real document link in your implementation.

&lt;div id="wrapper"&gt;

&lt;nav id="nav"&gt;
&nbsp;&nbsp; &nbsp;&lt;ul id="navigation"&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Services &amp;raquo;&lt;/a&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;ul&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Service 1&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Service 2&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Service 3 &amp;raquo;&lt;/a&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;ul&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;SubMenu 1&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;SubMenu 2&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;SubMenu 3&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;SubMenu 4&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/li&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Service 4&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/ul&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp; &nbsp;&lt;/ul&gt;
&lt;/nav&gt;

&lt;/div&gt;&lt;!--end wrapper--&gt;
&nbsp;&nbsp;&nbsp;

CSS

For this example we will  be using the following body styling:

body {
line-height: 1;
font:12px/20px Arial;
background:#e0f3ff ;
}

We will  style our nav & div element as follows. Depending on the target device (mobile browsers have less display area) and space requirement, you will alter the values.

#wrapper{
&nbsp;&nbsp; &nbsp;width:620px;
&nbsp;&nbsp; &nbsp;margin:0 auto;
&nbsp;&nbsp; &nbsp;margin-top:100px;
}

#nav {
&nbsp;&nbsp; &nbsp;position:relative;
&nbsp;&nbsp; &nbsp;width:620px;
&nbsp;&nbsp; &nbsp;margin:0 auto;
}

Then we will style each <ul> element as per their position in the navigation chain.

ul#navigation {
&nbsp;&nbsp; &nbsp;margin:0px auto;
&nbsp;&nbsp; &nbsp;position:relative;
&nbsp;&nbsp; &nbsp;float:left;
&nbsp;&nbsp; &nbsp;border-left:1px solid #c4dbe7;
&nbsp;&nbsp; &nbsp;border-right:1px solid #c4dbe7;
}

ul#navigation li {
&nbsp;&nbsp; &nbsp;display:inline;
&nbsp;&nbsp; &nbsp;font-size:12px;
&nbsp;&nbsp; &nbsp;font-weight:bold;
&nbsp;&nbsp; &nbsp;margin:0;
&nbsp;&nbsp; &nbsp;padding:0;
&nbsp;&nbsp; &nbsp;float:left;
&nbsp;&nbsp; &nbsp;position:relative;
&nbsp;&nbsp; &nbsp;border-top:1px solid #c4dbe7;
&nbsp;&nbsp; &nbsp;border-bottom:2px solid #c4dbe7;
}

Here is how to achieve transition using CSS3 only which are effects that let an element gradually change from one style to another
In this example we have used same declaration for multiple selectors. You may want to have individual declaration for each selector. Depending on the screen rendering preference, modify the timing in transition declaration from 0.2s. Note , how there are different declaration for different browsers.

ul#navigation ul, ul#navigation ul li ul {
&nbsp;&nbsp; &nbsp;list-style: none;
&nbsp;&nbsp;&nbsp; margin: 0;
&nbsp;&nbsp;&nbsp; padding: 0;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;visibility:hidden;
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; z-index: 99999;
&nbsp;&nbsp; &nbsp;width:180px;
&nbsp;&nbsp; &nbsp;background:#f8f8f8;
&nbsp;&nbsp; &nbsp;box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
&nbsp;&nbsp; &nbsp;opacity:0;
&nbsp;&nbsp; &nbsp;-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; ///* Chrome &amp;amp; Safari*/
&nbsp;&nbsp; &nbsp;-moz-transition:opacity 0.2s linear, visibility 0.2s linear; // /*Mozilla Firefox*/
&nbsp;&nbsp; &nbsp;-o-transition:opacity 0.2s linear, visibility 0.2s linear; // /* Opera */
&nbsp;&nbsp; &nbsp;transition:opacity 0.2s linear, visibility 0.2s linear; &nbsp;&nbsp; &nbsp;
}

In order to have the dropdown navigation we need to set the following property:

ul#navigation li a:hover {
&nbsp;&nbsp; &nbsp;background:#f8f8f8;
&nbsp;&nbsp; &nbsp;color:#282828;
}

ul#navigation li:hover &gt; a {
&nbsp;&nbsp; &nbsp;background:#fff;
}

/* Drop-Down Navigation */
ul#navigation li:hover &gt; ul
{
&nbsp;&nbsp; &nbsp;visibility:visible;
&nbsp;&nbsp; &nbsp;opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
&nbsp;&nbsp; &nbsp;list-style: none;
&nbsp;&nbsp;&nbsp; margin: 0;
&nbsp;&nbsp;&nbsp; padding: 0;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;visibility:hidden;
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; z-index: 99999;
&nbsp;&nbsp; &nbsp;width:180px;
&nbsp;&nbsp; &nbsp;background:#f8f8f8;
&nbsp;&nbsp; &nbsp;box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
&nbsp;&nbsp; &nbsp;opacity:0;
&nbsp;&nbsp; &nbsp;-webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
&nbsp;&nbsp; &nbsp;-moz-transition:opacity 0.2s linear, visibility 0.2s linear;
&nbsp;&nbsp; &nbsp;-o-transition:opacity 0.2s linear, visibility 0.2s linear;
&nbsp;&nbsp; &nbsp;transition:opacity 0.2s linear, visibility 0.2s linear; &nbsp;&nbsp; &nbsp;
}

ul#navigation ul {
&nbsp;&nbsp;&nbsp; top: 43px;
&nbsp;&nbsp;&nbsp; left: 1px;
}

ul#navigation ul li ul {
&nbsp;&nbsp;&nbsp; top: 0;
&nbsp;&nbsp;&nbsp; left: 181px;
}

ul#navigation ul li {
&nbsp;&nbsp; &nbsp;clear:both;
&nbsp;&nbsp; &nbsp;width:100%;
&nbsp;&nbsp; &nbsp;border:0 none;
&nbsp;&nbsp; &nbsp;border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
&nbsp;&nbsp; &nbsp;background:none;
&nbsp;&nbsp; &nbsp;padding:7px 15px;
&nbsp;&nbsp; &nbsp;color:#616161;
&nbsp;&nbsp; &nbsp;text-shadow:1px 1px 0px #fff;
&nbsp;&nbsp; &nbsp;text-decoration:none;
&nbsp;&nbsp; &nbsp;display:inline-block;
&nbsp;&nbsp; &nbsp;border:0 none;
&nbsp;&nbsp; &nbsp;float:left;
&nbsp;&nbsp; &nbsp;clear:both;
&nbsp;&nbsp; &nbsp;width:150px;
}

ul#navigation li a.first {
&nbsp;&nbsp; &nbsp;border-left: 0 none;
}

ul#navigation li a.last {
&nbsp;&nbsp; &nbsp;border-right: 0 none;
}

Let’s go through some of the CSS 3 important styles in there:

  1. Box-shadow: Add a nice shadow around our element. Syntax – box-shadow: h-shadow v-shadow blur spread color inset;
  2. RGBA: RGB simply means Red, Green, Blue, it’s an alternative to using HEX colours. By having RGBA we’ve specified an “Alpha” or opacity value to our shadow
  3. Margin: Done using the web developers compass (top, right, bottom, left), it specifies the “gap” around the element
  4. Transition: The transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last

Download the source code

This was an example of creating  simple navigation menu using HTML5 and CSS3.

Download
You can download the full source code of this example here : HTML5Menu

Arindam Chattopadhya

Arindam has completed Masters in Information Technology. His expertise includes enterprise applications architecture, application integration, legacy connectivity, user interface engineering, systems analysis and distributed systems architecture and design. He has hand-on expertise on Java EE , web technology and mobile application development.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Morten
9 years ago

This is interesting; I need to read me up on CSS3. I have resently converted my site to HTML5.

Owen McCarthy
Owen McCarthy
4 years ago
Reply to  Morten

Same here, the code seems more streamlined than the original HTML.

Sarah
9 years ago

It’s really nice and simple, thanks.

Sarah

Ajay Govind
Ajay Govind
9 years ago

cool bro………..thanks a lot

:)

more examples please….

sanjay
9 years ago

Thank for book

John K
John K
8 years ago
Reply to  sanjay

Very Nice…

Nataraj
Nataraj
8 years ago

very good one

Steve Wright
7 years ago

Hi,
Very nice!!

Quick Question:- I want to make the last li at the top level float to the far right of the screen (its a search box). Can you tell me how please?

Steve

Steve Wright
7 years ago
Reply to  Steve Wright

Got it, was missing a width declaration :)

caoncall
caoncall
4 years ago

Thanks guys, I can use all the help I can get, or.. git that is.

Back to top button