"menu style left side menu"
Bootstrap 3.3.0 Snippet by ronnielivingsince1994

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <ul> <li><a href="#">Latest</a></li> <li><a href="#">News</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Entertainment</a></li> <li><a href="#">Technology</a></li> </ul> </div> </div>
@import "compass/css3"; @import url(http://fonts.googleapis.com/css?family=Oswald); * { margin: 0; padding: 0; list-style: none; } html { background: #f1f1f1; } ul { position: absolute; } ul li { height: 50px; background: green; display: block; font-family: "Oswald", sans-serif; position: relative; z-index: 100; margin: 5px 0; -webkit-animation: menu 2s; -webkit-animation-fill-mode: forwards; -moz-animation: menu 2s; -moz-animation-fill-mode: forwards; -ms-animation: menu 2s; -ms-animation-fill-mode: forwards; animation: menu 2s; /* Safari and Chrome */ animation-fill-mode: forwards; opacity: 0; } ul li:hover { cursor: pointer; } ul li:before { display: block; height: 50px; width: 50px; content: '>'; font-size: 2em; position: absolute; left: 0; top: 0; border-right: rgba(255,255,255,0.2) 1px solid; text-align: center; color: #fff; text-shadow: rgba(0,0,0,0.2) 1px 1px 1px; z-index: 200; line-height: 1.3em; } li a { color: #fff; display: block; height: 50px; padding: 0 2em 0 70px; z-index: 100; text-decoration: none; text-transform: uppercase; font-size: 18px; line-height: 2.8em; position: absolute; top: 0; left: 0; overflow: hidden; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; text-shadow: rgba(0,0,0,0.3) 1px 1px; } ul li:nth-child(1) a { background: #888888; } ul li:nth-child(2) a { background: #628179; } ul li:nth-child(3) a { background: #21aabd; } ul li:nth-child(4) a { background: #654b6b; } ul li:nth-child(5) a { background: #bd2a4e; } li a:hover { opacity: 1.0; padding-right: 3.0em; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } ul li:nth-child(2) { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; -ms-animation-delay: 0.4s; animation-delay: 0.4s; } ul li:nth-child(3) { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; -ms-animation-delay: 0.8s; animation-delay: 0.8s; } ul li:nth-child(4) { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -ms-animation-delay: 1.2s; animation-delay: 1.2s; } ul li:nth-child(5) { -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -ms-animation-delay: 1.6s; animation-delay: 1.6s; } @-webkit-keyframes menu { 0% {opacity: 0;} 25% {opacity: 0.7;} 50% {opacity: 1;} 100% {opacity: 1;} } @-moz-keyframes menu { 0% {opacity: 0;} 25% {opacity: 0.7;} 50% {opacity: 1;} 100% {opacity: 1;} } @-ms-keyframes menu { 0% {opacity: 0;} 25% {opacity: 0.7;} 50% {opacity: 1;} 100% {opacity: 1;} } @keyframes menu { 0% {opacity: 0;} 25% {opacity: 0.7;} 50% {opacity: 1;} 100% {opacity: 1;} }
/*Feedly-style Animated CSS Nav Menu A simple unordered list with CSS animations, delays and hover transitions to jazz it up. http://www.kenchernoff.com twitter: @kenchernoff */

Related: See More


Questions / Comments: