css| Menu | navigation
If the traditional method of making this flip menu, at least need 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 (/imagelist/06/43/473648jpj0j1.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 (/imagelist/06/43/473648jpj0j1.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 (/imagelist/06/43/473648jpj0j1.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 (/imagelist/06/43/473648jpj0j1.gif) -180px-25px;
}
#imgmenu Li#faq A:hover, #activef {
Background:url (/imagelist/06/43/473648jpj0j1.gif) -270px-25px;
}
#imgmenu li#contact A:hover, #activec {
Background:url (/imagelist/06/43/473648jpj0j1.gif) -360px-25px;
}<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 the plain text browsing friends:
You can set the span element inside Li, add text links, and make span invisible in style.
