Menus play an essential part on the web. They allow users to find their bearings and help them navigate your website. When designing menus, usability is the key.
Beginners often struggle with the basics. In this tutorial I'm going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS. I will also dive a little bit into jQuery to add animations to your menu.
Basics
Let's start with the basic HTML structure of the menu:
1
2
3
4
5
6
7
| <ul id="coolMenu"><li><a href="#">Lorem</a></li><li><a href="#">Mauricii</a></li><li><a href="#">Periher</a></li><li><a href="#">Tyrio</a></li><li><a href="#">Quicumque</a></li></ul> |
divs. You don’t need any.To add a sub menu simply nest another unordered list inside the item that's going to have the sub menu, like this:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <ul id="coolMenu"> <li><a href="#">Lorem</a></li> <li><a href="#">Mauricii</a></li> <li> <a href="#">Periher</a> <ul> <li><a href="#">Hellenico</a></li> <li><a href="#">Genere</a></li> <li><a href="#">Indulgentia</a></li> </ul> </li> <li><a href="#">Tyrio</a></li> <li><a href="#">Quicumque</a></li></ul> |
As you can see, creating the structure is very simple. This is how it should look in your browser at this stage:
There are multiple ways to set up the CSS for a horizontal menu. After many years I found that this is the quickest and cleanest way to do it:
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
| #coolMenu,#coolMenu ul { list-style: none;}#coolMenu { float: left;}#coolMenu > li { float: left;}#coolMenu li a {display: block; height: 2em; line-height: 2em; padding: 0 1.5em; text-decoration: none;}#coolMenu ul { position: absolute; display: none;z-index: 999;}#coolMenu ul li a { width: 80px;}#coolMenu li:hover ul { display: block;} |
- I decided to float the whole menu to contain it but you can use overflow hidden or even set a fixed width for the same purpose.
- It is important to float the list elements rather than the links.
- The links should be displayed as blocks, otherwise, they won’t behave as expected.
- Absolute position the submenu and hide it to remove it from the regular flow and make it invisible. Also, set a high
z-indexto prevent the submenu from showing behind other elements. - Set a height for the link elements and the line-height equal to the height to center the text vertically. By specifying a fixed height instead of just using padding you avoid flickering problems with jQuery animations later on.
- Even though it’s not necessary to set a fixed width for the submenu items, it’s always a good practice. It allows you to style them more consistently later on.
- Notice that the hover state is set on the list element and not the link.
Improving Usability
This step will cover how to style the menu with some basic CSS to make it more accessible.
1
/* Main menu
2
-------------------------*/
3
#coolMenu {
4
font-family: Arial;
5
font-size: 12px;
6
background: #2f8be8;
7
}
8
#coolMenu > li > a {
9
color: #fff;
10
font-weight: bold;
11
}
12
#coolMenu > li:hover > a {
13
background: #f09d28;
14
color: #000;
15
}
16
/*
17
Submenu
18
------------------------------------------*/
19
#coolMenu ul {
20
}
21
#coolMenu ul li a {
22
}
23
#coolMenu ul li:hover a {
24
background: #ffc97c;
25
} | |
This is how the menu looks so far:
Adding Animations
This final step is not necessary but it’ll help you add animations to your menu with simple jQuery. The first thing you need to do, of course, is to call the latest jQuery plugin on your website:
1
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> |
1
2
3
4
5
6
7
8
| <li> <a href="#">Periher</a> <ul class="noJS"> <li><a href="#">Hellenico</a></li> <li><a href="#">Genere</a></li> <li><a href="#">Indulgentia</a></li> </ul> </li> |
1 #coolMenu li:hover ul.noJS {2 display: block;3 } |
1
2
3
4
5
6
| $(function(){$('#coolMenu').find('> li').hover(function(){ $(this).find('ul') .removeClass('noJS') .stop(true, true).slideToggle('fast'); });}); |
hover
function. Inside the function it removes the "noJS" class since we’re
using JavaScript, and then it tells the menu to slide down on hover and
to slide up on un-hover. This is achieved with the slideToggle function. The stop function prevents the animation from repeating itself if we hover multiple times.
0 comments: