Ajax Loader
×

Fancy Rolling Navigation

Have you seen this navigation? Yes, this is a navigation menu made by Sohtanaka. In his article, the menu is made with JQuery using .animate() techniques and .clone() to copy each text on the menu so that we can get two stacks menu item (the red and white stack).

Here I made it with pure CSS. Alter the .clone() function with :before pseudo-element to get the value from the data-clone attributes. After the two stack are created on each menu, I can easily animate this menu with transitioning the margin property. This JQuery menu already spread everywhere, you should've seen it. Just that for some reason I did not know, Sohtanaka's site was closed! (??)

Another Sohtanaka's site: http://www.designbombs.com/

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

2 Comments

× New

Sign In to comment

ron paul:

I have to say about this is very interesting, it seems that many people like it.

Rishabh :

yup, seems so. not sure what's wrong although a fixed width might solve it.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+