Been a while since I posted an update as i’ve been working alot, so I think it’s time for another CSS3 navigation menu tutorial. The tutorial will walk you through the process of structuring a navigation menu in HTML. Once the HTML is complete you will use Photoshop to create a textured background, and then the menu will be brought to life using CSS.

Demo

The first thing you will need is a blank HTML document. You can find this below along with the core navigation menu code.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!-- HTML 5 Doctype -->

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="UTF-8">

<link href="stylesheet.css"type="text/css"rel="stylesheet">

<title> CSS3 Navigation menu tutorial </title>

<!-- IE6-8 support of HTML5 elements --><!--[if lt IE 9]>

<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body >

<!-- NAV menu -->

<nav>

<ul id="navMain">

<li><a href="#"> Home</a></li>

<li class="currentPage"><a href="#"> Visit our site </a></li>

<li><a href="#"> About</a></li>

<li><a href="#"> Contact</a></li>

<li><a href="#"> Newsletter</a></li>

<li><a href="#"> Misc </a></li>

</ul>

</nav>

<!--- END nav menu -->

</body>

</html>

The code above is enough to produce a simple navigation menu. If you’re not familiar with the ‘<nav>’ tag you probably need to start looking into HTML5! It’s basically a block level tag that will operate in the same way a DIV would, the purpose though is to make HTML code more semantic. Anyways, you can see an example of the menu so far below:

Css3 navigation menu tutorial

To achieve the drop-down effect you will need some further code. To be more specific you will need to nest a further ‘<ul>’ within one of the ‘<li’> tags. You can see an example in the below code.

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!-- HTML 5 Doctype -->

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset="UTF-8">

<link href="stylesheet.css"type="text/css"rel="stylesheet">

<title> CSS3 Navigation menu tutorial </title>

<!-- IE6-8 support of HTML5 elements --><!--[if lt IE 9]>

<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body >

<!-- NAV menu -->

<nav>

<ul id="navMain">

<li><a href="#"> Home</a></li>

<li class="currentPage"><a href="#"> Visit our site </a></li>

<li><a href="#"> About</a>

<!-- UL nested within LI -->

<ul>

<li><a href="#"> Staff Members</a></li>

<li><a href="#"> Qualifications</a></li>

<li><a href="#"> Our Services</a></li>

<li><a href="#"> Location details</a></li>

<li><a href="#"> Pricing details</a></li>

</ul>

<!-- END nested UL -->

</li>

<li><a href="#"> Contact</a></li>

<li><a href="#"> Newsletter</a></li>

<li><a href="#"> Misc </a></li>

</ul>

</nav>

<!--- END nav menu -->

</body>

</html>

That’s the structure of the menu complete. To recap, you simply need to produce an unordered list with the required number of list items. If a certain list item needs to have a drop menu, then nest a further unordered list within it.

You should now have something similar to the following image, yes it looks messy at the moment but a bit of CSS will fix that:

The rest of this Css3 navigation menu tutorial will focus on using CSS to turn this list into a functional menu.

Step2: Style the menu using CSS3.

You can make a start by styling the top-level unordered list – which was given an ID of ‘navMain’. This will be used as the container, with a background, border etc added to it.

Create a sub-directory, in the same folder as your HTML & CSS files, named images. Place the texture image in this sub-folder.

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

#navMain{

list-style:none;

font-family:tahoma;

font-size:12px;

border:1px#a81b2fsolid;

float:left;

width:940px;

margin:0;

padding:0;

background:url('images/nav-bg.jpg');

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

}

Most of the above CSS is all pretty self-explanatory, the stuff which is not is explained below:

Border-radius is a property which comes as part of CSS3, it allows us to easily implement rounded corners without the need for images – pretty handy.

You will notice the menu has been floated to the left. This is to avoid a bug which occurs when elements are floated to the left – what happens is that the parent container will collapse. As we will be floating the ‘<li>’ tags to the left soon this fix is required. There are other ways to fix this bug but that is outside the scope of this tutorial.

The list-style property allows us to remove the bullet points from the list items.

Menu so far:

As you can see the container for the menu is now looking better. The list items however still need some attention… let’s look at that next.

Step 2.1: Style the list items.

As mentioned earlier the list items need to be floated to the left, they also need some styling to fit with the theme of the menu. The CSS below handles this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

#navMain > li{

float:left;

position:relative;

border-right:1pxsolid#9b2838;

}

#navMain > li > a{

color:#f4e4e6;

float:left;

text-decoration:none;

padding:11px18px;

border-right:1pxsolid#bf3549;

}

#navMain .currentPage a{

background:rgb(99,20,32);

/* RGBa with 0.6 opacity */

background:rgba(99,20,32,0.25);

}

#navMain ul {

display:none;

}

CSS Explained:

#navMain > li:

First of all you may have noticed the ‘>’ in the selector. This tells CSS to apply the styles to only direct children. So the CSS will NOT be applied to the list items nested within the nested (drop-down) UL. These nested list items will have separate styles which you will add later.

The ‘position: relative’ property is used to place child elements relative to its position. So, if you were to give the nested ‘<ul>’ the property ‘position:absolute’ it would be positioned relative to the parent ‘<li>’.

#navMain .currentPage a:

Using RGB to set the background color as it is possible to set the opacity of the background this way. An alternative would be to use the ‘opacity:0.6′. The problem with this is that it also applies to all children, applying the opacity change to the text as well as the background.

The first RGB property is used for browsers which do not support the opacity change, in this case a solid color will be displayed instead.

The final CSS rule simply hides the drop-down menu, in the next step you will learn how to display the drop-down menu again when an element is hovered. The menu so far:

Step 2.2: Drop-down menu

The next step is to style and display the menu as necessary. The CSS below handles this:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

#navMain ul {

display:none;

position:absolute;

list-style:none;

left:0;

padding:0;

margin:0;

border-top:1px#a81b2f solid;

background:#e8edee;

}

#navMain ul li a{

color:#5d6364;

text-decoration:none;

display:block;

padding:6px7px;

border-bottom:1pxsolid#d3d9da;

border-left:1pxsolid#d3d9da;

border-right:1pxsolid#d3d9da;

font-size:13px;

}

#navMain li:hover ul {

display:block;

top:39px;

min-width:200px;

}

CSS Explained:

#navMain ul:

The ‘position:absolute’ property sets the position of the element relative to the first parent with relative positioning(as discussed earlier).

We want the dropdown menu to vertically overlap the current menu by just 1px, this way it is possible to move the mouse from the parent ‘<li>’ into the nested ‘<ul>’ without firing the mouse out event (which would hide the dropdown). Design wise this looks a little strange, as the nested menu is now sitting on top of the parent. By adding a border to the top of the drop-down it blends in nicely with the original menu.

#navMain li:hover ul:

This is what brings the menu into display. It basically works as follows: Upon the hover event being fired, apply the following CSS to the element.

In this case, we set the display property to block – rather than none – making the element visible.

The top property is used to move the drop-down list into position vertically, moving the element 39px down from the top of the parent element.

The complete result of the CSS3 navigation menu tutorial:

That’s it for the time being although I do intend to update this post very soon with some enhancements including a bit of jquery, some drop-shadows, browser compatibility and some gradients.

About the Author

John Richardson: 26 years old, living in the UK. Currently works as a PHP Developer in North-East of UK.
Interested in HTML,CSS, Javascript, jQuery & PHP.

Hi, firstly thank you for this awesome tutorial, it's helping me allot! :D
I was wondering if there was a way of getting this tab in the center, top of the website? I am quite new to HTML5 and CSS so I have no clue how to do this? Thank you in advance!