pablorgarcia / side-navigation-menu

CSS3 transition property & without JavaScript

Side Navigation Menu

CSS3 transition property & without JS.

Check out the demo page.

How it works

We have a <nav> tag on the left of the screen with position: fixed;, a width and a fixed height.

Then we have a list with <svg> images and hidden links with display: none;, when we do a :hover over <nav> tag we added more with to the <nav> and a display: block; so that the links appear.

Finally, we have to write on the <nav> tag the CSS3 transition property:

nav{
  transition-delay: 0s;
  transition-duration: 0.4s;
  transition-property: all;
  transition-timing-function: line;
  }

Download, Fork, Commit.

If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.