Simple Side Navigation Menu with CSS3 Transitions

Preview:

Description:

A simple clean side navigation that slides out a menu with CSS3 transitions when mouse hovers over, no need for javascript.

How to use it:

Create a side navigation menu with UL lists.

<nav>
<ul>
<li><img scr="home.png" /><a href="">Home</a></li>
<li><img scr="about.png" /><a href="">About</a></li>
<li><img scr="work.png" /><a href="">Work</a></li>
<li><img scr="contact.png" /><a href="">Contact</a></li>
</ul>
</nav>

The CSS

a {
text-transform: uppercase;
text-decoration: none;
color: #151515;
transition-delay: 0s;
transition-duration: 0.36s;
transition-property: all;
transition-timing-function: line;
}
nav a:hover {
font-weight: 400;
}
nav, nav:hover {
padding: 1em;
}
nav a {
text-indent: -200px;
}
nav:hover a {
text-indent: 0px;
color: #EEFFE5;
}
svg, a {
vertical-align: top;
}
nav {
position: fixed;
left: 0;
top: 0;
bottom: 0;
display: block;
height: auto;
min-width: 40px;
width: 40px;
background-color: #ccc;
transition-delay: 0s;
transition-duration: 0.4s;
transition-property: all;
transition-timing-function: line;
}
nav:hover {
position: fixed;
left: 0;
top: 0;
bottom: 0;
height: auto;
width: 140px;
background-color: #9ED29E;
}
nav a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-left: 1em;
}
nav:hover a {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
li {
display: block;
padding: 0.2em;
height: 32px;
}
svg, a {
display: inline-block;
}