Using CSS to create your website navigation (or menu) is the smartest thing you can do. Why? – Because updating it is a breeze, and you will thank yourself everytime you have to add or remove a menu item while avoiding having to edit tons of individual pages on your website.
With a CSS menu, you can have ONE central file where your menu lives, and just include that file on every page of your website. Since horizontal menus are popular these days, this demonstration will show you how to create a simple yet elegant CSS horizontal menu for your website.
A sneak preview of our horizontal CSS menu:
Creating a list
Let’s begin. The first thing you have to do is make your list containing the links to all your pages:
<body>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>What We Do</a></li>
<li><a href=”#”>Locations</a></li>
<li><a href=”#”>Partnerships</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</body>
Converting the vertical list into a horizontal list
To get rid of the bullets and change the orientation from vertical to horizontal, we apply the following styles:
<style>
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
li {float:left;}
</style>
…so our menu is now horizontal:
Add the following styles for the links within the list, so that they behave as block elements, with a bit of breathing room between them:
<style>
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
ul li {float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:9px 17px 9px 17px;}
</style>
…so the result looks like this:
Making it presentable
Now that the horizontal menu is in place, we add more styles to make it look less like floating text and more like a
navigation bar:
<style>
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
ul li {float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:9px 17px 9px 17px; font-family:Arial; font-size:8pt; font-weight:bold; color:#ffffff; text-transform:uppercase; border-right:1px solid #607987; background-color:#7195aa; text-transform:uppercase; letter-spacing:.08em}
ul li a:hover {background-color:#3b6a85; color:#a2becf}
ul li a.first {border-left:0}
ul li a.last {border-right:0}
</style>
Since we don’t want the first and the last items of the menu bar to have a side border, we tweak the HTML just a bit by adding classes to both the first and last items in the menu:
<body>
<ul>
<li><a class=”first” href=”#”>Home</a></li>
<li><a href=”#”>What We Do</a></li>
<li><a href=”#”>Locations</a></li>
<li><a href=”#”>Partnerships</a></li>
<li><a class=”last” href=”#”>Contact</a></li>
</ul>
</body>
…and the floating text has transformed into a horizontal menu bar:
Adding dimension
Although we can stop here….it would be nice to add a little bit of dimension to the menu bar – just to give it some life. All this requires is that we replace the background colors with background images.
These are the two images we’ll use – save them in the same folder as the navigation bar:
(menu background image)
(menu background image at mouseover)
Now in your styles, tweak the background (for both
a and
a:hover), add some borders, and increase the right and left padding…your code should look like this:
<style>
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
ul li {float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:9px 20px 9px 20px; font-family:Arial; font-size:8pt; font-weight:bold; color:#ffffff; text-transform:uppercase; border-top:1px solid #9cbed2; border-right:1px solid #607987; border-left:1px solid #94b5c8; background: #7195aa url(bg.gif) repeat-x; text-transform:uppercase; letter-spacing:.08em}
ul li a:hover {color:#a2becf; border-top:1px solid #72a0ba; border-right:1px solid #2a4a5f; border-left:1px solid #8cb3c9; background: #3b6a85 url(bg2.gif) repeat-x}
ul li a.first {border-left:0}
ul li a.last {border-right:0}
</style>
Here is the enhanced version of our horizontal menu bar:
Creating the “you are here” effect
And finally…how do we change the background of the link that corresponds with the current page being viewed?
To do this, let’s revisit our HTML code for a second. In your HTML, give each menu link a special ID, for example:
<body>
<ul>
<li><a id=”nav-home” class=”first” href=”#”>Home</a></li>
<li><a id=”nav-whatwedo” href=”#”>What We Do</a></li>
<li><a id=”nav-locations” href=”#”>Locations</a></li>
<li><a id=”nav-partnerships” href=”#”>Partnerships</a></li>
<li><a id=”nav-contact” class=”last” href=”#”>Contact</a></li>
</ul>
</body>
For consistency, each ID begins with “nav-” because it’s easier to recognize in a busy stylesheet. In addition, give the body tag of
each page a special ID. For example:
Homepage:
<body id=”home” >
</body>
What We Do:
<body id=”whatwedo” >
</body>
Locations:
<body id=”locations” >
</body>
(you get the idea)….make it a habit to do this for every page on your website.
Why? Because it allows you to target a specific page and assign its elements a unique style. For example, if links on every page are blue, but you want the links on your homepage to be green, you can do this using the body IDs.
In your stylesheet, find the
a:hover styles. Here, you will tell the menu which link to highlight depending on which page is being viewed, like I’ve done below (separating each selector with a comma):
<style>
ul li a:hover,
body#home .nav-home,
body#whatwedo .nav-whatwedo,
body#locations .nav-locations
{color:#a2becf; border-top:1px solid #72a0ba; border-right:1px solid #2a4a5f; border-left:1px solid #8cb3c9; background: #3b6a85 url(bg2.gif) repeat-x}
</style>
So now, assuming that we’re viewing the page called “What We Do”, our horizontal CSS menu should look like this:
The complete code
In case you got lost anywhere in this demo, your complete code should now look like this:
<!DOCTYPE html>
<html>
<head>
<title>How to create a simple CSS horizontal menu</title>
<style>
ul {list-style-type:none; margin:0; padding:0; overflow:hidden;}
ul li {float:left;}
ul li a {display:block; text-decoration:none; text-align:center; padding:9px 20px 9px 20px; font-family:Arial; font-size:8pt; font-weight:bold; color:#ffffff; text-transform:uppercase; border-top:1px solid #9cbed2; border-right:1px solid #607987; border-left:1px solid #94b5c8; background: #7195aa url(bg.gif) repeat-x; text-transform:uppercase; letter-spacing:.08em}
ul li a:hover,
body#home .nav-home,
body#whatwedo .nav-whatwedo,
body#locations .nav-locations
body#partnerships .nav-partnerships,
body#contact .nav-contact
{color:#a2becf; border-top:1px solid #72a0ba; border-right:1px solid #2a4a5f; border-left:1px solid #8cb3c9; background: #3b6a85 url(bg2.gif) repeat-x}
ul li a.first {border-left:0}
ul li a.last {border-right:0}
</style>
</head>
<body>
<ul>
<li><a id=”nav-home” class=”first” href=”#”>Home</a></li>
<li><a id=”nav-whatwedo” href=”#”>What We Do</a></li>
<li><a id=”nav-locations” href=”#”>Locations</a></li>
<li><a id=”nav-partnerships” href=”#”>Partnerships</a></li>
<li><a id=”nav-contact” class=”last” href=”#”>Contact</a></li>
</ul>
</body>
</html>
Don’t forget…
• Change
<!DOCTYPE html> to an actual doctype.
(see why it matters)
• Move everything between the
<style></style> tags into a separate. stylesheet
• Move everything between the
<body></body> tags into an include file before you place the actual code for your website here.
(Without these last 2 steps, updating the horizontal menu on every single page will turn into a headache)
Also….
Just kidding, that’s it! :D
Sites
XAMPP for Windows
v1.8.3 (PHP 5.5.15)
XAMPP for Linux
v1.8.3 (PHP 5.5.15)
XAMPP for OS X
v1.8.3 (PHP 5.5.15)
