Ajax Loader
×

Flashy Navigation with Rollover Effect

Flashy Navigation with Cool Rollover Effect. The Rollover Effect was achieved by first setting a large margin on mouse hover to the navigation item and then after a small delay setting a negative top offset to the same item. I learnt this trick from a similar navigation made by Joe Critchley.

One thing to note is that, the background colors are set on the <li> instead of <a>. This is because during the rollover effect, the <a> pushes down which shows the <li> (which can have a different background color) from behind.

No Support in IE9 and below, but the navigation itself degrades gracefully.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Flashy Navigation with Rollover Effect

    CSSDeck G+