Coding a "Big Button" Horizontal Navigation Menu

Coding a “Big Button” Horizontal Navigation

In the tutorial “How to Make a Create a Modern Website Design“, I showed you a number of different techniques and styles while taking you through the Photoshop design. Today, I am going to show you a little part of the coding that goes into this design, specifically how to code the navigation element.

First of all, let me state that this design is being made available for download both as an HTML design and a WordPress template and will be so shortly.

What Is Being Coded?

Before starting, it is always a good idea to know exactly what is going to be made. Here is a screenshot taken from the design tutorial on how the menu is supposed to look.

Image of Navigation

While the image shows the entire header, this tutorial is only going to focus on getting the navigation to look right, leaving the logo alone.

The HTML Markup

Prior to starting with the CSS markup for this navigation, I like to get the HTML markup all done with. Seeing as there are many different ways of achieving an effect, it is good to start with one of them, locking it in place.

<div id="navigation"><!-- Start Navigation -->
	<ul>
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div><!-- End #navigation -->

The HTML markup is fairly straight-forward. First there is a div that acts as a container for the entire navigation. This is good if the navigation itself needs to be positioned in relation to another element on the page or need to have other extra formatting applied to it.

While some people would argue that you can do away with the surrounding div, it is easiest to leave it in, particularly given the placement of this navigation, floated left of a logo for example.

Inside of this #navigation div there is just a simple unordered list with links. This is a very powerful HTML markup technique that leaves all formatting to the CSS stylesheet.

There is one thing to note however. In the first list item, I have given the Home item’s link tag a class of “active”. This is to add the blue button for the currently active page.

The CSS Code

Without the CSS code, the HTML markup looks nothing like our final result. It is time to make some magic happen, just by using CSS.

Styling #navigation
First of all, let’s have a look at the code required to make the dark grey background bar, which is what the navigation div is for.

#navigation {
	width: 800px;
	height: 80px;
	background: #2c2f32;
}

Again, very straight forward and basic CSS code here. First, a width of 800px is applied, following by an 80px height. Finally, the background is set to its dark grey color.

Styling the unordered list
To style the full unordered list, a little more code is required. To give you an overview of what the result is going to be, here is the full code used for the unordered list:

#navigation ul {
	margin: 0;
	padding: 0;
}
 
	#navigation ul li {
		float: left;
		list-style: none;
		font-size: 18px;
		text-shadow: 1px 1px 2px #4f4f4f; /* X-axis Y-axis Blur Color */
	}
 
		#navigation ul li a {
			display: block;
			padding: 30px 25px 0 25px;
			margin: 0 5px 0 5px;
			height: 60px;
			color: #fff;
			text-decoration: none;
		}
 
			#navigation ul li a.active {
				background: #66a0da;
			}
 
				#navigation ul li a.active:hover {
					background: #66a0da;
					height: 60px;
				}
 
			#navigation ul li a:hover {
				background: #3a3d40;
				height: 50px;
			}

This might look a bit intimidating, but do not let it scare you off. It is actually rather simple.

Firstly, we are making sure that the container for the unordered list itself, which is a child of the #navigation div, has no margin or padding applied to it.

Following that, we need to take care of the next element in order, the list items themselves.

#navigation ul li {
	float: left;
	list-style: none;
	font-size: 18px;
	text-shadow: 1px 1px 2px #4f4f4f; /* X-axis Y-axis Blur Color */
}

Here is where the unordered list that we are all used to seeing is transform into the horizontal navigation list that is so very popular. The trick to get the items to align horizontally instead of vertically, is to float them to the left. (float: left;)

When doing that however, it would look best if the bullets, squares or whatever you have in front of the items did not show up. For the top-level hiding of all the list styles, we use the list-style parameter, set to none. (list-style: none;)

I chose to apply the specific font style right in the list item. In this case, the size is being set to 18px (where the family is being controlled by your main document tags). (font-size: 18px;)

Part of the design was to have a slight drop-shadow behind the text to make it stand out a little extra, especially on the blue, active button. There has been an attribute in CSS for quite a long time now called text-shadow. It’s support has been somewhat shady (pun intended) over the years but now has wide support in modern browsers. Instead of adding the shadow as an image, this will give the benefits of added speed. Should a user not have a modern-enough browser, the shadow will not show, which isn’t the end of the world!

For the text shadow, the syntax for its tag is included in the CSS comment, starting with defining the two distances, first X-axis, then Y-axis. The next bit specifies the amount of blur you would like, ending with the color of the shadow.

#navigation ul li a {
	display: block;
	padding: 30px 25px 0 25px;
	margin: 0 5px 0 5px;
	height: 60px;
	color: #fff;
	text-decoration: none;
}

In order to make the clickable element of the button as large as possible, all the padding and margin fixes, as well as size specifications are left to the anchor (a) styling. Normally, the a element is displayed as inline and will not react well to being set with padding. To make this appear more like a div tag, it is set to display as a block level element.

For the positioning of the tab, padding is used to get the text to align correctly just below center. In case you need a refresher, the syntax for the shorthand padding and margin goes: top right bottom left (clockwise movement).

Since padding is used to draw up most of the height for the tab, the actual height parameter just needs to be set as a finishing touch, making sure that the tab is high enough to overlap the grey navigation background.

Finally, colors are set and the default link style of an underline is removed.

This has us all set up and ready to go for applying some special background colors to make the tab.

#navigation ul li a.active {
	background: #66a0da;
}
 
	#navigation ul li a.active:hover {
		background: #66a0da;
		height: 60px;
	}

Very simple code here, just adding the blue color in for the anchor element that adheres to the hierarchy and also has the class of active directly on it.

By defining a special hover pseudo-selector for the active class, a key bug is eliminated. Had we not done this, the default hover style, made for the invisible tabs, ie. the tabs that do not have the active class and are not blue, will be applied over the blue tab.

To fix this bug, the blue background is applied and the height is set to the same of the tab, 60px.

#navigation ul li a:hover {
	background: #3a3d40;
	height: 50px;
}

Finally, it is nice to give users a visual hint that they are hovering over a button. For every page that isn’t the currently active one, we just want the background to change to a slightly lighter grey than the background, indicating the existence of the button. Also note the height addition here which makes sure the grey doesn’t overlap the background like the tab normally does.

Conclusion

Coding this type of navigation is not necessarily very hard. The technique used here with an unordered list is very common and a great way of creating navigational structures, both semantically and in terms of coding speed.

Another big bonus is that the navigation looks very good without the use of a single image, everything is based around different heights, spacings and background colors. It is the magic of code!

If you have any troubles implementing this in your project, just let me know in the comments below. As always, your comments (and questions) are welcome.

Other posts you might like…

Tags: , , , , , ,

About

Erik is the owner of online media company Bernskiold Media that runs tutorial website Bernskiold learning and he is a Web Designer, Photographer and Software-Trainer.

4 thoughts on “Coding a “Big Button” Horizontal Navigation

  1. Pingback: How to Create a Modern Blog Website Design at Bernskiold Learning

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>