Mar 17, 2010
Pure css image menu.
There many image menus if you search Google for them. But all of them are using JavaScript. I have managed to create one with pure css and works well in both decent web browsers and crap ones (Internet Explorer), check it out.The idea
I am using images in anchor tag's background, by default they are overlapped but leaves padding on hover, and shows off.Code
HTML
<div id="h">
<a href="#" style="background: url(http://www.arenaflowers.com/blog/wp-content/uploads/2009/01/christmas-winter-wedding-flowers.jpg) 0 0 no-repeat;"></a>
<a href="#" style="background: url(http://images.buddytv.com/articles/Ghost-Whisperer/Images/Jennifer-love.jpg) 0 0 no-repeat;"></a>
<a href="#" style="background: url(http://i.ehow.com/images/GlobalPhoto/Articles/5204725/perfect-lipstick-colors-skin-tone-main_Full.jpg) 0 0 no-repeat;"></a>
<a href="#" style="background: url(http://www.leadapparel.com/catalog/ComfortColors-5018.jpg) 0 0 no-repeat;"></a>
<a href="#" style="background: url(http://www.claritaslux.com/girls/beautiful/girl-ukraine.jpg) 0 0 no-repeat;"></a>
</div>
for horizontal menu use -
#h a{
padding-left:80px;
height:300px;
float:left;
}
#h a:hover{
padding-left:200px;
height:300px;
}
and for vertical menu use -
#v{
width:200px;
}
#v a{
padding-top:30px;
width:200px;
float:left;
}
#v a:hover{
height:300px;
}
Demo
You can see this code in action here.
Related Articles
Twitter like tool tip with pure css.Simplest image gallery with css.
Labels: css
By : Motyar+ @motyar