Nov 07, 2011 Floating CSS3 Toolbar Navigation With Animation

0677 viewsAuthor: Andrew Champ

What I have made is an ALL CSS3 animated toolbar that 'floats' when you scroll down on a page. It has a slide-in animation when the page loads, a slide / bounce animation for the description of each link, and follows as you scroll on a page, keeping the user in close contact with the navigation when your pages get long.

View Demo

Above is the link to see the demo, and below is the code that puts it together. Paste this code in your CSS file.

@keyframes slide{
	0%{top:-50px; opacity:0;}
	100%{top:0; opacity:1.0;}
}
@-moz-keyframes slide{
	0%{top:-50px; opacity:0;}
	100%{top:0; opacity:1.0;}
}
@-webkit-keyframes slide{
	0%{top:-50px; opacity:0;}
	100%{top:0; opacity:1.0;}
}

		
@keyframes word{
	0%{top:20px; opacity:0.5;}
	80%{top:55px;}
	100%{top:50px; opacity:1.0;}
}
@-moz-keyframes word{
	0%{top:20px; opacity:0.5;}
	80%{top:55px;}
	100%{top:50px; opacity:1.0;}
}
@-webkit-keyframes word{
	0%{top:20px; opacity:0.5;}
	80%{top:55px;}
	100%{top:50px; opacity:1.0;}
}
		
		
#toolbar{
	background-color:#000; /*Fallback background color for IE since it doesn't render rgba*/
	background-color:rgba(0, 0, 0, 0.85);
	color:#FFF;
	font-family:sans-serif;
	clear:both; 
	position:fixed;
	z-index:99;
	top:0; 
	right:20px;
	border-bottom:1px solid #000; 
	box-shadow:0 0 5px #000, 0 0 5px #000;
	text-shadow:-1px -1px 0 #000;
	font-weight:bold;
	
	-moz-animation-name: slide;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 1s;
		 
	-webkit-animation-name: slide;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 1s;
			
	animation-name: slide;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-duration: 1s;
}
		
#toolbar .title a{float:left; padding:10px; min-width:200px; text-align:center; color:#FFF; text-decoration:none;}
#toolbar ul{float:right; list-style-type:none; margin:0; padding:0;}
#toolbar li{display:inline;}
#toolbar li a{color:#FFF; text-decoration:none; position:relative; border-left:1px solid #444; border-right:1px solid #000; padding:10px; margin:0; display:inline-block; float:left; 
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.3s ease-in-out; 
	-o-transition: all 0.3s ease-in-out; 
	transition:all 0.3s ease-in-out;
}
#toolbar li a:hover{background:#CCC; color:#000; text-shadow:1px 1px 0 #FFF;}
		
#toolbar li span{display:none;}
#toolbar li:hover > span{display:block; position:absolute; top:50px; left:0; float:left; width:100%; text-align:center; text-shadow:none; color:#000;  
	-moz-animation-name: word;
	-moz-animation-timing-function: ease-in;
	-moz-animation-iteration-count: 1;
	-moz-animation-duration: 0.5s;
	
	-webkit-animation-name: word;
	-webkit-animation-timing-function: ease-in;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-duration: 0.5s;
			
	animation-name: word;
	animation-timing-function: ease-in;
	animation-iteration-count: 1;
	animation-duration: 0.5s;
}

Now for the html part. Paste this into the start of your html document, just after the body tag.

<div id="toolbar">
	<span class="title"><a href="#">AndrewChamp.com</a></span>
	<ul>
		<li><a href="#">gallery</a><span>See our examples</span></li>
		<li><a href="#">about</a><span>Get personal</span></li>
		<li><a href="#">contact</a><span>Have questions?</span></li>
		<li><a href="#">blog</a><span>Tutorials / Ideas</span></li>
	</ul>
</div>

Works in Firefox, Chrome, Opera. Also works in IE 7 and up with no animation, but is still functional.

If you have any questions about how it works or want to show me some praise, leave a comment below. Both are appreciated.

For users that would prefer to save this in their arsenal for later use, I included a zip of the file.

Download