Off Canvas Menu with Animated Links

View code Play Walkthrough

Experiments

Description

Learn to make a simple off canvas mobile navigation with delayed link animation.

The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.

Add New Comment

17 Comments

(close)
Niko

Niko

Great one and not complicated

Bence

Bence

If I copypasta the code, it doesn’t work on my localhost, but it works on thecodeplayer, apparently something wrong with section translateX, because when I change it to opacity:0; it makes the image invisible.
I’m using windows 8 with xampp, and chrome. In firefox it works just fine tho.

Bacce

Bacce

Figured out, -webkit-
thecodeplayer apparently add the missing browsersensitive code.
Sorry.

webtina

webtina

tank you. very beautiful and simple :)

Tad

Tad

elegant & simple code. May I use it?

Jack

Jack

not working on chrome. laaaaaaaame.

Alexandr Zibert

Alexandr Zibert

Very comfortable, nice, save space.
Many thanks for the great job.

kavi

kavi

not working on chrome, its working on IE, fix the problem

loco

loco

not working in android stock browser

cythux

cythux

Not work in a solution of lamp or xampp on localhost without internet – only here.

I tested this with prefix-free from lea.verou

Marcelo

Marcelo

It’s not working on Chrome because the CSS command : #tm:checked is not implemented on Chrome. Anyway I learned a lot watching the code. Regards.

Lips

Lips

The ad link box covers the click me button

Robert Vassallo

Robert Vassallo

For those insisting the code doesn’t work correctly, don’t forget to add the appropriate vendor prefixes.

Robin

Robin

Guys, to fix the problem in Chrome and so on, you need to use -webkit-transform, -ms-transform and -moz-transform :) It solves the problem.

Dafian

Dafian

Will to try tonight! awesome code!

5x 10x 15x 20x

17 Comments

Description