CSS3 Menu Navigation Effect

October 31, 2011

Hi guys been a long time since i write on my blog and then i inaugurate this day with a new tutorial that will treat apply CSS3 properties to menu navigation. We are going to see how to play nice effects without the use of jQuery.

I remember this tutorial works perfectly on all browsers except Internet Explorer for the first two examples, while the last example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property. Let’s start!

First Example – CSS3 Menu Navigation Effect only CSS3 Transition

HTML

Now look carefully … this markup is really easy, just create an unordered list and insert inside the links that we need, apply an .animation class every li that has a link and we will see later how the animation will apply to our links!

<ul id="panel">  
 <li><h3>MENU</h3></li>  
 <li class="animation"><a href="#">Link 1</a></li>  
 <li class="animation"><a href="#">Link 2</a></li>  
 <li class="animation"><a href="#">Link 3</a></li>  
 <li class="animation"><a href="#">Link 4</a></li>  
 <li class="animation"><a href="#">Link 5</a></li>  
</ul>  

CSS

In addition to the graphics menu, we simply set transition property and apply to the translateX property the value that should animate every time the mouse passes over the link. This example is very simple, but we got a nice effect.

/* CSS3 TRANSITION ONLY EFFECT */
#panel { 
	width:300px;
	list-style:none; 
	padding-top:30px;
	display:inline-block;
}

#panel li {  
	border-radius:3px 3px 3px 3px; 
	margin-top:5px;
	width:150px;
	background: #000000;
	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
	background: -o-linear-gradient(top, #161616 0%,#000000 100%);
	border-left:1px solid #111;
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#panel li a { 
	color:#fff; 
	display:block; 
	padding:10px;
}

#panel li a:hover { 
	color:#00c6ff;
}

#panel li.animation { 
	-moz-transition: all 0.4s ease-in-out; 
	-moz-transform:translateX(0px); 
	-o-transition: all 0.4s ease-in-out; 
	-o-transform:translateX(0px); 
	-webkit-transition: all 0.4s ease-in-out; 
	-webkit-transform:translateX(0px); 
}

#panel li.animation:hover { 
	-moz-transform:translateX(25px);
	-o-transform:translateX(25px);
	-webkit-transform:translateX(25px);
}

Second Example – CSS3 Menu Navigation Effect only CSS3 Transition

HTML

This second example is no different from the precedent for markup, except for the addition of the maskclass will be used to hide the links and appear this with CSS3 transition to hover over the mask class. Each link will have its own class, this will help us in the animation of each link with the different properties from each other.

<ul id="paneltwo">  
 <li class="mask"><h3>MENU ></h3></li>  
 <li class="linkOne"><a href="#">Link 1</a></li>  
 <li class="linkTwo"><a href="#">Link 2</a></li>  
 <li class="linkThree"><a href="#">Link 3</a></li>  
 <li class="linkFour"><a href="#">Link 4</a></li>  
 <li class="linkFive"><a href="#">Link 5</a></li>  
</ul>  

CSS

We see that thanks to the mask class we can hide behind it the menu links. Each link has its own unique translateX property and set delay property to create a nice effect. Nothing hard to just play with the initial and final parameters translateX property, you can alternatively use cubic-bezier effect instead ease-in-out.

/* CSS3 TRANSITION ONLY EFFECT */
#paneltwo { 
	width:300px;
	list-style:none; 
	position:relative;
	display:inline;
}

#paneltwo li {  
	border-radius:3px 3px 3px 3px; 
	margin-top:5px;
	width:150px;
	float:left;
	overflow:hidden;
	position:relative;
	background: #000000;
	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
	background: -o-linear-gradient(top, #161616 0%,#000000 100%);
	border-left:1px solid #111; 
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#paneltwo li.mask { /* It allows us to hide the link behind it */
	z-index:10; 
	overflow:hidden;
}

#paneltwo li a { 
	color:#fff; 
	display:block; 
	padding:10px;
}

#paneltwo li a:hover { 
	color:#00c6ff;
}

#paneltwo li.linkOne, 
#paneltwo li.linkTwo, 
#paneltwo li.linkThree, 
#paneltwo li.linkFour, 
#paneltwo li.linkFive {   
        -moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

#paneltwo:hover li.linkOne, 
#paneltwo:hover li.linkTwo, 
#paneltwo:hover li.linkThree, 
#paneltwo:hover li.linkFour, 
#paneltwo:hover li.linkFive { 	
        -moz-transform:translateX(0px);
	-moz-transition: all 1s ease-in-out; 
	-webkit-transform:translateX(0px);
	-webkit-transition: all 1s ease-in-out; 
	-o-transform:translateX(0px);
	-o-transition: all 1s ease-in-out; 
}

#paneltwo li.linkOne {
	-moz-transform:translateX(-90%); 
	-moz-transition-delay:0.6s; 
	
	-webkit-transform:translateX(-90%); 
	-webkit-transition-delay:0.6s; 
	
	-o-transform:translateX(-90%); 
	-o-transition-delay:0.6s; 
	
	z-index:5; 
}

#paneltwo li.linkTwo { 
	-moz-transform:translateX(-180%); 
	-moz-transition-delay:0.5s; 
	
	-webkit-transform:translateX(-180%); 
	-webkit-transition-delay:0.5s; 
	
	-o-transform:translateX(-180%); 
	-o-transition-delay:0.5s; 
	
	z-index:4;
}

#paneltwo li.linkThree { 
	-moz-transform:translateX(-270%); 
	-moz-transition-delay:0.4s; 
	
	-webkit-transform:translateX(-270%); 
	-webkit-transition-delay:0.4s; 
	
	-o-transform:translateX(-270%); 
	-o-transition-delay:0.4s;
	
	z-index:3;
}

#paneltwo li.linkFour { 
	-moz-transform:translateX(-360%); 
	-moz-transition-delay:0.3s;
	
	-webkit-transform:translateX(-360%); 
	-webkit-transition-delay:0.3s;
	
	-o-transform:translateX(-360%); 
	-o-transition-delay:0.3s; 
	z-index:2;
}

#paneltwo li.linkFive { 
	-moz-transform:translateX(-450%); 
	-moz-transition-delay:0.2s;
	
	-webkit-transform:translateX(-450%); 
	-webkit-transition-delay:0.2s;
	
	-o-transform:translateX(-450%); 
	-o-transition-delay:0.2s;
	 
	z-index:1;
}

#paneltwo:hover li.linkOne { 
	-moz-transition-delay:0s; 
	-webkit-transition-delay:0s; 
	-o-transition-delay:0s; 
	z-index:5;
}

#paneltwo:hover li.linkTwo { 
	-moz-transition-delay:0.2s;
	-webkit-transition-delay:0.2s;
	-o-transition-delay:0.2s; 
	z-index:4;
}

#paneltwo:hover li.linkThree { 
	-moz-transition-delay:0.4s;
	-webkit-transition-delay:0.4s;
	-o-transition-delay:0.4s; 
	z-index:3;
}

#paneltwo:hover li.linkFour { 
	-moz-transition-delay:0.6s;
	-webkit-transition-delay:0.6s;
	-o-transition-delay:0.6s; 
	z-index:2;
}

#paneltwo:hover li.linkFive { 
	-moz-transition-delay:0.8s;
	-webkit-transition-delay:0.8s;
	-o-transition-delay:0.8s; 
	z-index:1;
}

Third Example – CSS3 Menu Navigation Effect with CSS3 Animation and CSS3 Transition

HTML

This last example is equal to the second example in the markup, the difference will find it in CSS3 properties a combination of CSS3 Animation and CSS3 Transition.

<ul id="panelthree">  
 <li class="mask"><h3>MENU ></h3></li>  
 <li class="linkAnimationOne"><a href="#">Link 1</a></li>  
 <li class="linkAnimationTwo"><a href="#">Link 2</a></li>  
 <li class="linkAnimationThree"><a href="#">Link 3</a></li>  
 <li class="linkAnimationFour"><a href="#">Link 4</a></li>  
 <li class="linkAnimationFive"><a href="#">Link 5</a></li>  
</ul>  

CSS

The magic of CSS has no limits, we have created for each link a unique class to assign different values ​​of delay properties. We created an unique CSS3 Animation for every link which will be set according to the delay in its class.

Also set an reverse animation but with the use of the CSS3 Transition. Unfortunately, the reverse animation will appears only in Firefox, while in Safari and Chrome not appear reverse animation, but will return to its original position without any animation.

/* CSS3 TRANSITION and CSS3 ANIMATION EFFECT */
#panelthree { 
	width:300px;
	list-style:none; 
	position:relative;
	display:inline;
}

#panelthree li {  
	border-radius:3px 3px 3px 3px; 
	margin-top:5px;
	width:150px;
	float:left;
	overflow:hidden;
	position:relative;
	background: #000000;
	background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
	background: -o-linear-gradient(top, #161616 0%,#000000 100%);
	border-left:1px solid #111; 
        border-top:1px solid #111; 
        border-right:1px solid #333; 
        border-bottom:1px solid #333;
}

#panelthree li.mask { /* It allows us to hide the link behind it */
	z-index:10; 
	overflow:hidden;
}

#panelthree li a { 
	color:#fff; 
	display:block; 
	padding:10px;
}

#panelthree li a:hover { 
	color:#00c6ff;
}

#panelthree li.linkAnimationOne, 
#panelthree li.linkAnimationTwo, 
#panelthree li.linkAnimationThree, 
#panelthree li.linkAnimationFour, 
#panelthree li.linkAnimationFive {
        -moz-transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
}

#panelthree:hover li.linkAnimationOne, 
#panelthree:hover li.linkAnimationTwo, 
#panelthree:hover li.linkAnimationThree, 
#panelthree:hover li.linkAnimationFour, 
#panelthree:hover li.linkAnimationFive{ 
        -moz-animation:bounceX 0.5s linear forwards;
	-webkit-animation:bounceX 0.5s linear forwards;
}

#panelthree:hover li.linkAnimationTwo { 	
	-moz-animation-delay:0.5s;
	-webkit-animation-delay:0.5s; 
}

#panelthree:hover li.linkAnimationThree { 
	-moz-animation-delay:1s;
	-webkit-animation-delay:1s; 
}

#panelthree:hover li.linkAnimationFour{ 
	-moz-animation-delay:1.5s;
	-webkit-animation-delay:1.5s; 
}

#panelthree:hover li.linkAnimationFive { 
        -moz-animation-delay:2s;
	-webkit-animation-delay:2s;
}

#panelthree li.linkAnimationOne {
	-moz-transform:translateX(-100%); 
	-webkit-transform:translateX(-100%); 

	z-index:5; 
}

#panelthree li.linkAnimationTwo {
	-moz-transform:translateX(-200%); 
	-webkit-transform:translateX(-200%); 
	
	z-index:4; 
}

#panelthree li.linkAnimationThree {
	-moz-transform:translateX(-300%); 
	-webkit-transform:translateX(-300%); 
	
	z-index:3; 
}

#panelthree li.linkAnimationFour {
	-moz-transform:translateX(-400%); 
	-webkit-transform:translateX(-400%); 
	
	z-index:2; 
}

#panelthree li.linkAnimationFive {
	-moz-transform:translateX(-500%); 
	-webkit-transform:translateX(-500%); 
	
	z-index:1; 
}
@-moz-keyframes bounceX {
    0% { 
       -moz-transform: translateX(-205px); 
       -moz-animation-timing-function: ease-in; 
    }
    
    40% { 
    	-moz-transform: translateX(-100px); 
        -moz-animation-timing-function: ease-in; 
    }
    
    65% { 
    	-moz-transform: translateX(-52px); 
        -moz-animation-timing-function: ease-in; 
    }
    
    82% { 
    	-moz-transform: translateX(-25px); 
        -moz-animation-timing-function: ease-in;
    }
    
    92% { 
    	-moz-transform: translateX(-12px); 
        -moz-animation-timing-function: ease-in; 
    }
    
    55%, 75%, 87%, 97%, 100% { 
    	-moz-transform: translateX(0px); 
        -moz-animation-timing-function: ease-out; 
    }
}

@-webkit-keyframes bounceX {
    0% { 
    	-webkit-transform: translateX(-205px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    40% { 
    	-webkit-transform: translateX(-100px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    65% { 
    	-webkit-transform: translateX(-52px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    82% { 
    	-webkit-transform: translateX(-25px); 
        -webkit-animation-timing-function: ease-in; 
    }
    
    92% { 
    	-webkit-transform: translateX(-12px); 
        -webkit-animation-timing-function: ease-in;
    }
    
    55%, 75%, 87%, 97%, 100% { 
    	-webkit-transform: translateX(0px); 
        -webkit-animation-timing-function: ease-out; 
    }
}
}

Conclusion

In this experiment i wanted to create nice effects without the use of jQuery script.

Unfortunate that not all browsers can enjoy this good fortune, alternatively you can use Modernizr for browsers that do not support CSS3 properties.