Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Horizontal CSS Menus: CSS3 demos: Here

3D rollover menu

Author: Dynamic Drive

This horizontal menu flips the traditional rollover effect over its head to create a rather unique effect. As the user mouses over a menu item, it rolls up in a 3D fashion like a cube to reveal the bottom side, which is a duplicate of the original menu item's content.

Demo:

The menu employs a few CSS2 and CSS3 techniques in its making. Specifically:

Compatibility wise the rollover effect works in IE10+ and all modern versions of Firefox and Chrome. It degrades well in IE9 and below, showing no rollover effect.

The CSS:

Refer to the comments inside the CSS when modifying the CSS code.

The HTML:

For the HTML markup, each menu item's text and "data-text" attribute value must match- for example the text "Home" should appear twice, once inside the SPAN element, once inside the "data-text" attribute.

Code Info

Rate this code:

Date Posted: 12/03/2014

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.


Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.