Today I am going to show you how to create shiny horizontal navigation menu with easy few steps. In this tutorial, you are going to learn about creating shiny horizontal navigation menu with use of HTML UL tag, style with CSS to get a rich look and little help of Photoshop.

Required Skills: HTML/CSS, Photoshop

Difficulty Level: Beginner
Download Files:

Final Output

Step 01

Open a Photoshop program and create a new document and set width for 10px, height for 50px and other settings same as in the following image,

Horizontal Navigation Menu

Step 02

Select Rectangle Tool from your tool panel and draw a rectangle to fill the document that you have created. Then you will get a layer called Shape 1 (default layer name) and select that layer if it is not selected and right click on that layer to select Blending Options. Then click on the Gradient color preset under the Gradient Overlay option and create color stops like the image below. Give this #eeeeee color code to the middle color, stop and make sure 35, in the location field.

Horizontal Navigation Menu

Now you have done with the gradient color presets and click OK button. Make sure that the other settings look same as the image below in Gradient Overlay option.

Horizontal Navigation Menu

Step 03

Now we are in the final step of Photoshop, because we have created the background image for our navigation menu and now we need to save that image to use in our HTML document, later. So click File >> Save for Web & Devices and select PNG-24 in the preset. You can see that in the following image.

Horizontal Navigation Menu

Make sure the image size is 10 x 50 pixels. This image size was already set when we were creating a new document. Remember yourself if you forgot the size…

The above things are okay and now click Save button below in that window and save your file as nav-bg.png or your own name. The one of the best professional practices to work with a web design project is organizing the all files with in the one folder (main/root folder) and sub folders in that main folder as well. So let’s assume that you have created a folder called navigation (as main folder) and inside that folder you have a sub folder called images. So your image, that we have been created above should come like this

…navigation\images\nav-bg.png

Okay we have finished with Photoshop. So now let’s start with creating a HTML document and CSS style sheet.

Step 04

Open a new notepad document and save it as Index.html in your navigation folder. Then open that index.html in notepad then copy and paste below code finally save it.


</pre>
<div id="navigation">
<ul>
	<li class="active"><a href="#">HOME</a></li>
	<li><a href="#">BLOG</a></li>
	<li><a href="#">ABOUT</a></li>
	<li class="last"><a href="#">CONTACT</a></li>
</ul>
</div>
<pre>
<!-- end navigation -->

Now open your index.html file on your browser and see. You will get an unordered list with bullets points.

Okay let’s see inside the code. I have mentioned earlier that you need HTML and CSS skills to understand this tutorial. So I am assuming that you have familiar with HTML and CSS and I don’t need to explain each code that I have provided in this tutorial. You can understand and experiment unordered list here.

You can see inside the code that I have linked a style.css file in index.html. But we haven’t created that file yet. So let’s proceed with next and final step.

Final Step

Open a new notepad document and save it as style.css in your navigation folder. Then open style.css file with notepad then copy and paste the following code.

body {
	background: #000;
	font-family: calibri;
}
#navigation {
	width: 470px;
	height: 50px;
	font-size: 18px;
	margin: 200px auto 0;
	padding: 0;
}
#navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
#navigation li {
	display: inline;
	float: left;
	background: url(images/nav-bg.png) repeat-x;
	border-right: 1px #3e3e3e solid;
}
#navigation a {
	float: left;
	color: #3e3e3e;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	line-height: 50px;
	width: 116px;
}
#navigation a:hover {
	color: #bc210b;
}
#navigation a:visited {
	color: #fe6835;
}
#navigation li.active {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#navigation li.last {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

Now we have finished the tutorial. So let’s open the index.html or if you already opened just refresh and see the changes. Wow, we have made it as the following image shown.

Horizontal Navigation Menu

Note

You can see border-radius property in the above CSS codes. This property is introduced in CSS3 and it is only support CSS3 supported browsers. You can learn more about border-radius property here.

I am not explain about each HTML and CSS code that I have used in this tutorial. If anyone need explanation please feel free to request by comment below.

Conclusion

Finally you have learned that you can create shiny horizontal navigation menu for your webpages easily with in a few steps. Please just try to find the little trick in this tutorial and use it with your own inspiration and improve your skills in web designing. Best of luck!

If you like this tutorial please consider sharing and following my blog on Twitter and like my blog on Facebook. And also consider subscribing to the RSS feed.