Motyar

Freelance Web Developer

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>

 

CSS
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:


By :