<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<nav class="nav">
<h1 class="branding">Ω</h1>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Sit amet</a></li>
</ul>
</nav>
/**
* Completely image-less CSS3 animated navigation
*/
body {
font: 1em/1.5 'Droid Sans', sans-serif;
background: #ccc;
margin: 0;
}
a {
color: #333;
text-decoration: none;
border-bottom: 1px solid rgba(32, 223, 128, 0.5);
}
a:hover {
border-color: #20df80;
}
.branding {
font: 3em/.5 '';
color: #20df80;
text-shadow: 0 1px #107040;
}
.nav {
background: white;
text-align: center;
border-top: 5px solid;
width: 150px;
margin: 0 auto;
position: fixed;
top: 0;
left: 2em;
-webkit-transform: translate3D(0, -95%, 0);
transform: translate3D(0, -95%, 0);
-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 1.5);
transition: -webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 1.5);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1.5);
transition: transform 0.5s cubic-bezier(0.5, 0, 0, 1.5), -webkit-transform 0.5s cubic-bezier(0.5, 0, 0, 1.5);
-webkit-filter: drop-shadow(0 0.15em 0.1em rgba(0, 0, 0, 0.25));
filter: drop-shadow(0 0.15em 0.1em rgba(0, 0, 0, 0.25));
}
.nav:hover {
-webkit-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
.nav::before, .nav::after {
content: '';
display: block;
position: absolute;
}
.nav::before {
background: #20df80;
width: 100%;
height: 15%;
top: -15%;
}
.nav::after {
top: 100%;
border-width: 30px 75px 0 75px;
border-color: white transparent;
border-style: solid;
}
.nav ul {
list-style: none;
padding: 0;
}
.nav ul li {
padding: 10px 0;
}
