Off Canvas Menu with Animated Links
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.
17 Comments
Description
17 Comments
(close)Niko
Great one and not complicated
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
Figured out, -webkit-
thecodeplayer apparently add the missing browsersensitive code.
Sorry.
webtina
tank you. very beautiful and simple :)
Patrik
Not working!
Tad
elegant & simple code. May I use it?
Jack
not working on chrome. laaaaaaaame.
Alexandr Zibert
Very comfortable, nice, save space.
Many thanks for the great job.
i5um41ru
really like it.. :)
kavi
not working on chrome, its working on IE, fix the problem
loco
not working in android stock browser
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
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
The ad link box covers the click me button
Robert Vassallo
For those insisting the code doesn’t work correctly, don’t forget to add the appropriate vendor prefixes.
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
Will to try tonight! awesome code!