<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
*/
