Fancy header navigation menu using css3 transition

In our previous tutorials we have had look at different features of css3 and html5 like creating css3 flowers using gradient effect, Introduction to HTML5 web storage, Ajax file upload with drag and drop and progress bar. In this tutorial we will look at the new css3 feature css3 transition. css3 transition is in experiment (draft) phase so while using properties related to it you have to prefix it with “-moz-” for Firefox, “-webkit-” for chrome and safari, and “-o-” for opera.Top better understand how it works We will be creating a navigation menu using css3 transition effect.

     Our final navigation menu will look something like this
Navigation menu using css3

Index.html

I am using two different directories for storing black and white images and color images. So all the black and white images are in “bw” folder and all the color images are in “color” folder. When first time menu loads we will show bw images and on mouse over event we will replace that “bw” folder name with “color” so bw images will become colorful and it will give a fancy look to the navigation menu.
     As i said earlier i am using “-moz”,”-webkit-” and “-o-” so it can work in all the browsers. Internet explorer doesnt support css3 transition property yet so what we can do it just hope that next version of IE will support it. And this is what we have done till date, we are just hoping hoping and hoping but IE never keep up with other browsers.
Anyways lets have a look at the code. I am using DIVs and anchor tag to create navigation menu, i am not sure but this could be also designed using UL and LI’s also, I tried but i wasnt able to give it proper look that i wanted so went with DIV’s.

      

style.css

body{
	font-family: verdana;
	background: #fff;
}
.menu{
	float: right;
}
.menu .item{
	float: left;
	margin-left: 5px;
	width: 150px;
	height: 80px;
	padding-top: 60px;
	background: #F7F7F7;
	text-align: center;
	color: #444444;
	box-shadow: inset 0 0 10px #C0C0C0;
	text-shadow:1px 1px 1px rgba(255, 255, 255, 0.5), 1px 1px 1px rgba(0, 0, 0, 0.7);
	border-radius: 0px 0px 8px 8px;
	-moz-transition: all 0.5s linear 0s;
	-webkit-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
}
.menu a{
	text-decoration: none;
}
.menu .item:hover{
	color: #fff;
	box-shadow: inset 0 0 8px #6C6C6C;
}
.menu .home:hover{
	background-color: #ADB7FA;
}
.menu .client:hover{
	background-color: #A0D856;
}
.menu .tech:hover{
	background-color: #15A697;
}
.menu .career:hover{
	background-color: #C2BF2E;
}
.menu .contact:hover{
	background-color: #E9B672;
}

Jquery

	$(document).ready(function(){
		$(".item").mouseenter(function(){
			var src = $(this).find("img").attr("src");
			var npath = src.replace("bw","color");
			$(this).find("img").attr("src",npath);
		});
		$(".item").mouseleave(function(){
			var src = $(this).find("img").attr("src");
			var npath = src.replace("color","bw");
			$(this).find("img").attr("src",npath);
		});
	});

 

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. Excellent use of CSS3 and Jquery Amit…
    Loved Demo of Navigation..
    You can also add hover jquery selector to make extra fun in demo.

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in CSS, jQuery (7 of 38 articles)


    I recently added article about web storage and demonstrated how to use local storage and session storage. So i ...