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

Rollover Text Menu

Author: Dynamic Drive

This CSS menu creates the popular rollover text effect of text sliding up to reveal a duplicate of itself when the mouse rolls over a menu item. It uses CSS2 generated content to first duplicate the menu item's text (using attribute value content), then CSS3 transitions and transform to slide up the original menu text to reveal the duplicate mouse over. It uses a minimal of extra markup - only an extra SPAN tag wrapping around each menu item's text, plus a custom data-text attribute inside that specifies the new text that should be shown (whether it's a duplicate of the original item text or something else, you decide).

The menu works in IE10+, and all modern versions of FF, Chrome, Safari, and Opera. It degrades almost perfectly with older browsers, down to IE7.

Demo (best viewed in (IE10+, FF4+, Chrome/Safari, and Opera 10+):

The CSS:

The HTML:

Some important bits when customizing the menu. To modify the new text that gets shown when the mouse rolls over a menu item, modify its data-text attribute:

<li><a class="glidebutton" href="http://www.dynamicdrive.com"><span data-text="Home">Home</span></a></li>

The value could simply be a duplicate of the original menu item text, or something entirely different.

If you modify the font size of the menu, you'll probably want to adjust the height of the menu items (a.glidebutton), plus the padding of the inner SPAN (a.glidebutton > span:first-child) accordingly:

a.glidebutton{
"
font: bold 14px Arial; /* font settings */
"
height: 30px; /* height of each button */
}

and:

a.glidebutton > span:first-child{ /* first span inside button */
"
"
padding: 6px; /* padding of button */
}

The padding value should be changed to ensure the text appears vertically centered within the button based on the button's height.

Code Info

Rate this code:

Date Posted: 03/24/2013

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.


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.