css| Menu | Web page if the traditional way to make this flip menu, at least to cut the picture into 10 pieces, but also to add JS code, in the Picture button to add behavior, now completely with CSS to achieve, the picture as long as a, see the following figure:
CSS code:
#imgmenu {
width:450px;
height:25px; /* height is half of the background picture * *
Background:url (.. /images/navbg.gif);
List-style-type:none;
padding:0px;
margin:0px;
}
#imgmenu li{
Float:left;
}
#imgmenu Li a{
Display:block;
width:90px;
height:25px;
}
#imgmenu li#home A:hover, #activeh {
Background:url (.. /images/navbg.gif) 0-25px;
/* Flip the position of the background image, left 0px, top -25px,
The lower part of the background image, hereinafter * * *
}
#imgmenu li#about A:hover, #activea {
Background:url (.. /images/navbg.gif) -90px-25px;
/* The position of the second menu is 90px from the left.
The width of each menu is 90px*/
}
#imgmenu Li#pro A:hover, #activep {
Background:url (.. /images/navbg.gif) -180px-25px;
}
#imgmenu Li#faq A:hover, #activef {
Background:url (.. /images/navbg.gif) -270px-25px;
}
#imgmenu li#contact A:hover, #activec {
Background:url (.. /images/navbg.gif) -360px-25px;
}
Xhtml:
<ul id= "Imgmenu" >
<li id= "Activeh" ><a href= "#" ></a></li>
<li id= "about" ><a href= "#" ></a></li>
<li id= "Pro" ><a href= "#" ></a></li><li id= "FAQ" ><a href= "#" ></a></li >
<li id= "Contact" ><a href= "#" ></a></li></ul>
Designed to be more considerate, take care of plain text browsing friends: You can set the span element inside Li, add text links, set span in style is not visible.
