Home » HTML5 » HTML5 Dropdown menu example with CSS3

About Arindam Chattopadhya

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.

HTML5 Dropdown menu example with CSS3

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.

Want to be a HTML5 Ninja?

Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!

In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

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

HTML5 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.

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

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.

<body>
<div id="wrapper">

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

<li><a href="#" >YourNewMenu Item</a></li>

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

<div id="wrapper">

<nav id="nav">
    <ul id="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services &raquo;</a>
            <ul>
                <li><a href="#">Service 1</a></li>
                <li><a href="#">Service 2</a></li>
                <li><a href="#">Service 3 &raquo;</a>
                    <ul>
                        <li><a href="#">SubMenu 1</a></li>
                        <li><a href="#">SubMenu 2</a></li>
                        <li><a href="#">SubMenu 3</a></li>
                        <li><a href="#">SubMenu 4</a></li>
                    </ul>                    
                </li>                    
                <li><a href="#">Service 4</a></li>
            </ul>
        </li>
    <li><a href="#">Help</a></li>
    </ul>
</nav>

</div><!--end wrapper-->
   

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{
    width:620px;
    margin:0 auto;
    margin-top:100px;
}

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

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

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

ul#navigation li {
    display:inline;
    font-size:12px;
    font-weight:bold;
    margin:0;
    padding:0;
    float:left;
    position:relative;
    border-top:1px solid #c4dbe7;
    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 {
    list-style: none;
    margin: 0;
    padding: 0;    
    visibility:hidden;
    position: absolute;
    z-index: 99999;
    width:180px;
    background:#f8f8f8;
    box-shadow:0 2px 2px -1px rgba(0, 0, 0, 0.055);
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear; ///* Chrome &amp; Safari*/
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear; // /*Mozilla Firefox*/
    -o-transition:opacity 0.2s linear, visibility 0.2s linear; // /* Opera */
    transition:opacity 0.2s linear, visibility 0.2s linear;     
}

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

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

ul#navigation li:hover > a {
    background:#fff;
}

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

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

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

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

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

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

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

ul#navigation li a.last {
    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

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

8 comments

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

  2. It’s really nice and simple, thanks.

    Sarah

  3. cool bro………..thanks a lot

    :)

    more examples please….

  4. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook