Coding a Smooth CSS Expanding Navigation

2006-12-09

I expect you've all completed part one of the tutorial, Designing the Smooth Expanding Navigation. If you've completed that tutorial, you should have something somewhat similar to this -

Completed expanding navigation design.

Now I'd like you to take a look at what the navigation will look and work like once it's coded (click on the 'Tutorials' and 'Resources' categories to see the full functionality).

Firstly we have to slice the image we made in the last tutorial, we only need the backgrounds of the buttons as we will add text in the html. So hide your text layers then make a selection of a single button then copy it into a new canvas and save as Button_Group.jpg. Now make a selection of your other button, the sub-menu button, then copy it to a new canvas and save as Button_Option.jpg. Your new images should look like this -

Navigation button.

Now we're ready to code, let's start with an empty html document with just the basic structural code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />
<title>Vertical navigation.</title>

<style type="text/css">
<!--

-->
</style>

<script type="text/Javascript">
<!--

-->
</script>

</head>
<body>

<div title="Navigation">

</div>

</body>
</html>

What I've got there is the general <head> code, a place for CSS styling, a place for javascript and a space (a <div>) to add our navigation. We will be using each of these empty spaces soon.

First, I think it would be best to create the basis of the navigation, the links. Add the following code within the 'Navigation' <div> we already created.

<a href="#" class="Group">Home</a>
<a href="#" class="Group">Tutorials</a>
	<a href="#" class="Option">Photoshop</a>
	<a href="#" class="Option">Flash</a>
	<a href="#" class="Option">PHP / MySQL</a>
<a href="#" class="Group">Resources</a>
	<a href="#" class="Option">Software</a>
	<a href="#" class="Option">Source Code</a>
	<a href="#" class="Option">Websites</a>
<a href="#" class="Group">Contact</a>

Notice that I created three classes: Navigation, Group and Option. These classes will be the basis of the design of our navigation, the rest of the design will be done with CSS. Add the following code to your internar stylesheet -

body {
	font-family: Arial,  Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
}
.Group {
	display: block;
	height: 28px;
	width: 173px;
	background-image: url(Button_Group.jpg);
	line-height: 27px;
	padding-left: 27px;
	color: #dfdfdf;
	text-decoration: none;
}
.Group:hover {
	color: #dfdfdf;
	text-decoration: underline;
}
.Option {
	display: block;
	height: 28px;
	width: 173px;
	background-image: url(Button_Option.jpg);
	line-height: 27px;
	padding-left: 27px;
	color: #dfdfdf;
	text-decoration: none;
}
.Option:hover {
	color: #dfdfdf;
	text-decoration: underline;
}
.show {
	display:inline;
}
.hide {
	display:none;
}

What I did with that CSS is; changed the text to a suitable font and size, make each link a specific size with the button image as a background and make the links display an underline on rollover. I also added hide and unhide which we will use later in our javascript.

Now our design is coded but we want to add the expanding feature so we'll have to change the navigation a little and add some javascript. First lets change our navigation, we want the javascript to be able to hide and unhide the sub-menus so we need to group the sub-menus in a div with unique ID like the following. We also want the menu items with sub-menus to call a javascript function rather than a different page. -

<div title="Navigation">
	<a href="#" class="Group">Home</a>
	<a href="javascript:display('Tutorials')" class="Group">
Tutorials</a>
	<div class="show" id="Tutorials">
		<a href="#" class="Option">Photoshop</a>
		<a href="#" class="Option">Flash</a>
		<a href="#" class="Option">PHP / MySQL</a>
	</div>
	<a href="javascript:display('Resources')" class="Group">
Resources</a>
	<div class="show" id="Resources">
		<a href="#" class="Option">Software</a>
		<a href="#" class="Option">Source Code</a>
		<a href="#" class="Option">Websites</a>
	</div>
	<a href="#" class="Group">Contact</a>
</div>

Now the last thing we have to do is create our javascript function to hide and unhide our sub-menus, add the following javascript within the script area we added at the start of the tutorial.

function display (category) {
	var whichcategory = document.getElementById(category);
	if (whichcategory.className=="show") {
		whichcategory.className="hide";
	} else {
		whichcategory.className="show";
	}
}

What that javascript does is switch the class of the relevent <div> between 'show' and 'hide'.

Your code should have ended up similar to this -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1" />
<title>Vertical navigation.</title>

<style type="text/css">
<!--
body {
	font-family: Arial,  Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
}
.Group {
	display: block;
	height: 28px;
	width: 173px;
	background-image: url(Button_Group.jpg);
	line-height: 27px;
	padding-left: 27px;
	color: #dfdfdf;
	text-decoration: none;
}
.Group:hover {
	color: #dfdfdf;
	text-decoration: underline;
}
.Option {
	display: block;
	height: 28px;
	width: 173px;
	background-image: url(Button_Option.jpg);
	line-height: 27px;
	padding-left: 27px;
	color: #dfdfdf;
	text-decoration: none;
}
.Option:hover {
	color: #dfdfdf;
	text-decoration: underline;
}
.show {
	display:inline;
}
.hide {
	display:none;
}
-->
</style>

<script type="text/Javascript">
<!--
function display (category) {
	var whichcategory = document.getElementById(category);
	if (whichcategory.className=="show") {
		whichcategory.className="hide";
	} else {
		whichcategory.className="show";
	}
}
-->
</script>
</head>
<body>

<div title="Navigation">
	<a href="#" class="Group">Home</a>
	<a href="javascript:display('Tutorials')" class="Group">
Tutorials</a>
	<div class="show" id="Tutorials">
		<a href="#" class="Option">Photoshop</a>
		<a href="#" class="Option">Flash</a>
		<a href="#" class="Option">PHP / MySQL</a>
	</div>
	<a href="javascript:display('Resources')" class="Group">
Resources</a>
	<div class="show" id="Resources">
		<a href="#" class="Option">Software</a>
		<a href="#" class="Option">Source Code</a>
		<a href="#" class="Option">Websites</a>
	</div>
	<a href="#" class="Group">Contact</a>
</div>

</body>
</html>

I hope you understood this tutorial and will find a use for the concept and code.

Tutorials-db.com is an Privacy Policy and Legal

Link To Us! Site Map