Home » Featured » Pure CSS3 Navigation Menu Effect – Download

Pure CSS3 Navigation Menu Effect – Download

Great example of what can you create with CSS3 alone and a little basic HTML markup. Excellent navigation menu with some great smooth polished animation. The effects that we create in this navigation menu will enhance the user experience, so if some user doesn’t have a modern browser, the menu will continue to work perfectly well. In this post you can learn how its done or download entire project along with the icons, and use it.

Add_modern_navigation_effects_using_css3

Basic HTML Structure

Create unordered list with “nav” id inside a div with “container” id.

<div id="container">

<ul id="nav">
<li><div class="icon"><img src="png/Link.png" /></div><a href="#" title="Click Here For..."><h4>Favorites</h4><span id="smallpanel">View yout favorites</span></a></li>
<li><div class="icon"><img src="png/Quill.png"/></div><a href="#" title="Click Here For..."><h4>Settings</h4><span>Edit Your Settings</span></a></li>
<li><div class="icon"><img src="png/Button Reload.png"/></div><a href="#" title="Click Here For..."><h4>Blog</h4><span>View Our Blog</span></a></li>
<li><div class="icon"><img src="png/Gears.png" /></div><a href="#" title="Click Here For..."><h4>Portfolio</h4><span>View Our Portfolio</span></a></li>
<li><div class="icon"><img src="png/Puzzle.png"/></div><a href="#" title="Click Here For..."><h4>About Us</h4><span>Read More About Us</span></a></li>
<li><div class="icon"><img src="png/Weather Sunny.png"/></div><a href="#" title="Click Here For..."><h4>Contact</h4><span>Drop Us a Message</span></a></li>
</ul><!-- Nav -->

</div><!-- Container -->

Now Lets Power Up The HTML With Some CSS3 Magic

Create a new CSS file or use your existing css file, and start styling.

@charset "utf-8";
/* CSS Document */

@-webkit-keyframes slideFromTop {
	from {
		opacity:0;
		-webkit-transform:translateY(-200%);
		-moz-transform:translateY(-200%);
		-ms-transform:translateY(-200%);
		-o-transform:translateY(-200%);
	}
	to {
		opacity:1;
		-webkit-transform:translateY(0%);
		-moz-transform:translateY(0%);
		-ms-transform:translateY(0%);
		-o-transform:translateY(0%);
	}
}

@-webkit-keyframes slideFromRight {
	from {
		opacity:0;
		-webkit-transform:translateX(200%);
		-moz-transform:translateX(200%);
		-ms-transform:translateX(200%);
		-o-transform:translateX(200%);
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0%);
		-moz-transform:translateX(0%);
		-ms-transform:translateX(0%);
		-o-transform:translateX(0%);
	}
}

@-moz-keyframes slideFromTop {
	from {
		opacity:0;
		-webkit-transform:translateY(-200%);
		-moz-transform:translateY(-200%);
		-ms-transform:translateY(-200%);
		-o-transform:translateY(-200%);
	}
	to {
		opacity:1;
		-webkit-transform:translateY(0%);
		-moz-transform:translateY(0%);
		-ms-transform:translateY(0%);
		-o-transform:translateY(0%);
	}
}

@-moz-keyframes slideFromRight {
	from {
		opacity:0;
		-webkit-transform:translateX(200%);
		-moz-transform:translateX(200%);
		-ms-transform:translateX(200%);
		-o-transform:translateX(200%);
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0%);
		-moz-transform:translateX(0%);
		-ms-transform:translateX(0%);
		-o-transform:translateX(0%);
	}
}

@-o-keyframes slideFromTop {
	from {
		opacity:0;
		-webkit-transform:translateY(-200%);
		-moz-transform:translateY(-200%);
		-ms-transform:translateY(-200%);
		-o-transform:translateY(-200%);
	}
	to {
		opacity:1;
		-webkit-transform:translateY(0%);
		-moz-transform:translateY(0%);
		-ms-transform:translateY(0%);
		-o-transform:translateY(0%);
	}
}

@-o-keyframes slideFromRight {
	from {
		opacity:0;
		-webkit-transform:translateX(200%);
		-moz-transform:translateX(200%);
		-ms-transform:translateX(200%);
		-o-transform:translateX(200%);
	}
	to {
		opacity:1;
		-webkit-transform:translateX(0%);
		-moz-transform:translateX(0%);
		-ms-transform:translateX(0%);
		-o-transform:translateX(0%);
	}
}


body {
	background:#dedede;
	font-size:62.5%;
	font-family:Verdana, Geneva, sans-serif;
}

#container {
	width:960px;
	position:relative;
}

ul#nav {
	width:400px;
}

ul#nav li {
	-webkit-transition:all 0.15s linear;
	-moz-transition:all 0.15s linear;
	-ms-transition:all 0.15s linear;
	-o-transition:all 0.15s linear;
	padding:10px;
	list-style:none;
	background:#FFF;
	border:#CCC thin solid;
	border-width:1px;
}

ul#nav li a {
	font-family:Verdana, Geneva, sans-serif;
	color:#333;
	text-decoration:none;
}

ul#nav li a:hover {
}

ul#nav li:hover {
	background:#dcebeb;
	-webkit-transform:translateY(-3px) scale(1.05);
	-moz-transform:translateY(-3px) scale(1.05);
	-ms-transform:translateY(-3px) scale(1.05);
	-o-transform:translateY(-3px) scale(1.05);
	
	-webkit-box-shadow:0px 2px 7px #999;
	box-shadow:0px 2px 7px #999;
	
	z-index:1000;
	
	/****************************** Hover Linear Gradient Generator Code - http://www.colorzilla.com/gradient-editor/ ***************************************************/
	background: rgb(135,224,253); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg3ZTBmZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzUzY2JmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNWFiZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,224,253,1)), color-stop(40%,rgba(83,203,241,1)), color-stop(100%,rgba(5,171,224,1))); /*         Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-8 */
}

ul#nav li .icon {
	display:inline-block;
	float:left;
	font-size:30px;
	animation:slideFromRight 0.7s ease-in;
}

ul#nav li:hover .icon {
	animation:slideFromTop 0.7s ease-in;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	color:#FFF;
}

ul#nav li .icon img {
	width:36px;
	height:36 px;
}

ul#nav li span {
	animation:slideFromTop 0.7s ease-in;
	padding:0px 0px 0px 38px;
}

ul#nav li a h4 {
	margin:0;
	padding:0;
	font-size:3em;
	display:block;
	text-transform:capitalize;
	font-weight:normal;
}

div#panel {
	margin:0 1px;
	width:560px;
	height:477px;
	float:left;
	border:#cfcfcf thin solid;
	border-width:2px;
	-webkit-box-shadow:0px 0px 4px #ccc;
	box-shadow:0px 0px 4px #ccc;
}

div#smallpanel {
	margin:0 1px;
	width:60px;
	height:477px;
}

#smallpanel h3 {
	width:477px;
	margin:0;
	padding:0;
	font-size:5em;
	display:block;
	text-transform:capitalize;
	color:#8faabd;
	color:rgba(255,255,255,0.5);
	font-weight:normal;
	-webkit-transform-origin:0 0;
	-webkit-transform:rotate(90deg) translateY(-60px) translateX(20px);
	-webkit-transition:all 0.3s linear;
	-moz-transform-origin:0 0;
	-moz-transform:rotate(90deg) translateY(-60px) translateX(20px);
	-moz-transition:all 0.3s linear;
	-ms-transform-origin:0 0;
	-ms-transform:rotate(90deg) translateY(-60px) translateX(20px);
	-ms-transition:all 0.3s linear;
	-o-transform-origin:0 0;
	-o-transform:rotate(90deg) translateY(-60px) translateX(20px);
	-o-transition:all 0.3s linear;
	cursor:pointer;
}


Note: Icons are included in the project package for download.

DEMO DOWNLOAD

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top