CSS3 transition, box-shadow, transform properties. Responsive Web Design technologies & without JS.
Check out the demo page.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.
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; }
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
,
.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; } }
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); }
If you think you can make this better, please Download, Fork, & Commit. I'd love to see your ideas.