Side Navigation Menu V2, RWD

CSS3 transition, box-shadow, transform properties. Responsive Web Design technologies & without JS.

Check out the demo page.

How it works

We have a

tag on the left of the screen with position: fixed;, a width and a fixed height.

Then we have a list with display: none;, when we do a :hover over

tag we added more with to the

and a display: block; so that the links appear.

Transition property for movement to the side navigation

We have to write on the

tag the CSS3 transition property:


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

Box-shadow property for 3D effect

When the screen is smaller than 1024px, the box-shadow property are going to be used at the .navigation.

.navigation {
    box-shadow:
      #D4D4D4 -1px 1px,
      #D4D4D4 -2px 2px,
      #D4D4D4 -3px 3px,
      #D4D4D4 -4px 4px,
      #D4D4D4 -5px 5px,
      #D4D4D4 -6px 6px;
}

The next step is add another box-shadow property on a:hover,

inside.

.navigation > ul > li > a:hover{
    box-shadow:
      #666 -1px 1px,
      #666 -2px 2px,
      #666 -3px 3px,
      #666 -4px 4px
}

But in the case screen is larger than 1024px, the box-shadow property of .navigation is not used.

@media only screen and (min-width: 1024px) {
    .navigation { box-shadow: none; }
}

Transform property is to correct the position

We need to have the .navigation just the same size of the box-shadow property that we wrote before.

.navigation { transform: translate3d(4px, 0px, 0); }

And create the new position for the a:hover.

.navigation a:hover { transform: translate3d(6px, 0px, 0); }

Download, Fork, Commit.

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