TUTORIAL: Pop-Out Buttons with Sprite and CSS

[smoovo]

To make your main menu, or just another menu you have on site, and you want to make it alive a little, use this tutorial and your imagination to edit the images and the positions.

Link to the tutorial in my website (plus demo) is HERE.

The HTML

<div class="pop_menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
</div>

The CSS

.pop_menu {
    width:300px;
    height:50px;
}

.pop_menu a {
    width:100px; 
    height:42px; 
    float:left; 
    background:url('buttons.png') 0 -50px no-repeat; 
    text-align:center; 
    padding-top:8px; 
    color:#000; 
    text-decoration:none;
}

.pop_menu a:hover {
    height:20px; 
    background-position:0 0; 
    padding-top:30px;
}

The Image

So give it a rate, and tell me how is it working for you - Tested on IE, FF, Safari and Opera - Enjoy.


____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com

 

[PixelPusher]

I will make this thread sticky once it is semantically correct and adheres to today's web standards (no offense just being truthful)

 

[smoovo]

After a little re-touch i have shorter version that compatible with IE6 too, so i edit the tutorial above.

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com

 

[bcee]

Good stuff. Started using sprites not too long ago, very useful.

 

[PixelPusher]

The CSS

.pop_menu a:hover {
    height:20px; 
    background-position:0 0; 
    padding-top:30px; 
    text-decoration:none;
}

There is no need to add the same text decoration property to the hover state. By nature the styles will cascade unless otherwise noted.

So you only need to add changes to the hover state, if an elements property is going to change.

 

[smoovo]

There is no need to add the same text decoration property to the hover state. By nature the styles will cascade unless otherwise noted.

So you only need to add changes to the hover state, if an elements property is going to change.

Ye... Thanks.. I forgot not to copy "text-decoration:none;" line. Fixed.


____________________
[email protected]
www.SMooVo.com – Web Design

 

[PixelPusher]

Ye... Thanks.. I forgot not to copy "text-decoration:none;" line. Fixed.


____________________
[email protected]
www.SMooVo.com – Web Design

Np your welcome.