This tutorial will show you how to create a clean, sleek navigation menu using CSS3. You will learn how to add shadows and gradients to elements using CSS3 exclusively and a lot more!
I have included explanations in the comments throughout the code on this page, so if you find yourself stuck on something try refering to the comments.
You can view a demo here:
http://weebtutorials.com/examples/cleanCSS3/
Lets get started then.
Structure the navigation menu using HTML
The first thing i would like to mention here is that we will be using the ‘Google web fonts API’ to integrate a custom font into our webpage. It’s a very simple process. You simply visit the site, find the font you wish to use, cut and paste some code from the site and your ready to go. You can view the site at http://www.google.com/webfonts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<head> <!--Link to Open sans google font --> <link href='http://fonts.googleapis.com/css?family=Open+Sans:regular,bold' rel='stylesheet' type='text/css'> </head> <body> <div id="navMain"> <ul> <li><a href="#"> Home</a></li> <li id="currentPage"><a href="#"> Visit our site </a></li> <li><a href="#"> About</a></li> <li><a href="#"> Contact</a></li> <li><a href="#"> Newsletter</a></li> <li><a href="#"> Misc </a></li> </ul> </div> |
Very simple stuff, create an unordered list inside a DIV. Add in a few list items and specify an ID for the current page. Once we have this done we can begin styling the navigation menu using CSS.
Styling the menu using CSS / CSS3.
First of all lets give the page a nice dark background, the navigation menu is a nice off white colour and i think it will look best on a dark background.
|
1 2 3 |
html{ background:#2b2725; } |
Ok - now lets start with the menu. First of all, simply specify the width required for the navigation menu. The next 8 or so lines are all used to add a gradient background to the element. Each line is dedicated to a specific browser, dont worry though you dont need to remember all of this!
Luckily there is a nice gradient generator at http://www.colorzilla.com/gradient-editor/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#navMain { width: 940px; /*Below code is for gradient background - as you can see each line is dedicated to a certain browser */ background: #f9f9f9; /* Old browsers */ background: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f9f9f9 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f9f9f9 0%,#e0e0e0 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #f9f9f9 0%,#e0e0e0 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #f9f9f9 0%,#e0e0e0 100%); /* W3C */ /*End gradient background */ /*add shadow to box*/ -webkit-box-shadow: 2px 2px 4px 1px ; /* from left to right - Horiz. length, Vert length, Blur radius, spread*/ -moz-box-shadow: 2px 2px 4px 1px ; box-shadow: 2px 2px 4px 1px ; /*End shadow */ float:left; } |
Nav bar so far:
Looking good, now lets format the list / list items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
#navMain ul{ list-style:none; /*remove bullets*/ float:left; font-family: 'Open Sans', arial, serif; /*Custom font implemented via google fonts api*/ } #navMain ul li{ display:inline; /* List images horizontally*/ margin-right:25px; /* space images out*/ } #navMain ul li a{ text-decoration:none; /*remove underline*/ font-weight:bold; color:#7b7b7b; font-size:14px; /*Add white glow to text using text-shadow property*/ text-shadow: 1px 1px 1px #ffffff; /* From left to right - horizontal offset, vertical offset, blur radius, color. filter: dropshadow(color=#ffffff, offx=1, offy=1); /*End shadow*/ } #navMain ul li a:hover{ color:#3986a6; } |
Navigation menu so far:
Now that our links are styled we can go ahead and add the search form to the bar. The following code should be placed directly below the </ul> tag.
|
1 2 3 4 5 6 7 |
<form action="none" method="post"> <div> <input type="text" /> <button class="button" name="button" type="submit" > <span>search</span></button> </div> </form> |
And now to style the search form. The button used is generated from http://css3buttongenerator.com/
|
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 |
#navMain form{ float:right; /*move to righthand side*/ margin:17px 24px 0px 0px; /*Position the form as required*/ } /*following code taken from the CSS3 button generator*/ .button { color: #2f545d; font-size: 12px; padding: 2px 4px; text-decoration: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 1px 1px 3px #c0c0c0; -moz-box-shadow: 1px 1px 3px #c0c0c0; text-shadow: 1px 1px 1px #bae8f2; border: solid #58a1b3 1px; background:#75cee6; background: -webkit-gradient(linear, 0 0, 0 100%, from(#75cee6), to(#58a6bc)); background: -moz-linear-gradient(top, #75cee6, #58a6bc); } .button:hover { background:#7acdde; background: -webkit-gradient(linear, 0 0, 0 100%, from(#7acdde), to(#72becf)); background: -moz-linear-gradient(top, #7acdde, #72becf) } |
The navigation is now pretty much complete:
Add a polished finish to the navigation menu using JQuery.
We recently wrote a tutorial covering how to fade between two colours using JQuery. You can view the tutorial by following the link below:
http://weebtutorials.com/2011/06/use-jquery-to-fade-between-2-colors-nice-navigation-effect/
It shouldnt take long to read through it and the end effect is definately worth the effort.
Thanks for reading.
