Menú de navegación lateral simple con transiciones CSS3

Vista prévia

Descripción

Una sencilla navegación lateral limpia que desliza un menú con transiciones CSS3 cuando el ratón se desplaza, sin necesidad de JavaScript.

Funcionamiento

Cree un menú de navegación lateral con las listas UL .

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

El 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;
}