Enter your email address:

Delivered by FeedBurner


Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Sample css Menu With Background image on hover
12-14-2011, 01:26 PM (This post was last modified: 12-15-2011 11:40 AM by rajasri.)
Post: #1
Photo Sample css Menu With Background image on hover
Today you are going to learn how to create a simple css menu like this when hover it shows background image.
[Image: cssmenu1.png]
Creating css menu is quite simple First create a background image in box type and create a css file with code below

#menu {
font-family: "Trebuchet MS", Arial, san-serif;
color:#999999;
width:100%;
height:45px;
font-size:14px;
margin:1px;
display:block;
border-bottom:none;
padding-bottom:0px;
font-weight:bold;
text-decoration:none;
color:#666666;
padding-left:0px;
padding-top:16px;
padding-right:16px;
padding-bottom:-14px;
}
#menu a
{
font-family: "Trebuchet MS", Arial, san-serif;
color:#999999;
width:100%;
height:45px;
font-size:14px;
margin:1px;
display:block;
border-bottom:none;
padding-bottom:0px;
font-weight:bold;
text-decoration:none;
color:#666666;
padding-left:21px;
padding-top:16px;
padding-right:25px;
padding-bottom:-14px;
}
.aonline
{
background:url(box2.gif) no-repeat top left ;
padding-left:21px;
padding-top:16px;
padding-right:25px;
padding-bottom:-14px;
}
#menu a:hover
{
display:block;
background-position:0px;
background-position:center;
position:relative;
background:url(box2.gif) no-repeat top left ;
margin:1px;
width:100%;
height:45px;
color:white;
font-weight:bolder;
padding-left:21px;
padding-top:16px;
padding-right:25px;
padding-bottom:-14px;
}
Create html file like below
Quote:<center><b> Menu tutorial by <a href="http://walkinsforum.com" target="_blank">http://s2sgateway.com</a><br><//b>
</center>
<div id="menu">
<table>
<td width="0px"> </td>
<td align="center">
<a href="http://s2sgateway.com" class="aonline">HOME</a></td>
<td width="60px"> </td>
<td>
<a href="http://s2sgateway.com"> ABOUT US</a></td>
<td width="60px"> </td>

<td>
</table>

Download menututorial
Remember if your image is in different directory change the url in css.
Any doubt ask us
happy coding
Find all posts by this user
Add Thank You Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies Views: Last Post
Photo simple css search box using image rajasri 0 1,340 12-14-2011 12:04 PM
Last Post: rajasri

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

Like Our Facebook Page