Javascript 
Menus Menu CSS Sprite Method
Menus Menu CSS Sprite Method Menus Menu CSS Sprite Method In this tutorial i will show you how to make a menu with css sprite method! This method is very usefull becouse reduce number of http acces.
I create a css file and i put "style.css" the name.
<link href="style.css" type="text/css" rel="stylesheet" />
I created 4 buttons, if you want more buttons or want to change the name must edit the picture of the button (if you like this design you can download and edit) and a add or remove a line of html code.
<ul id="menu">
<li id="home"><a href="#"><span>Home</span></a></li>
<li id="about"><a href="#"><span>About Us</span></a></li>
<li id="gallery"><a href="#"><span>Gallery</span></a></li>
<li id="contact"><a href="#"><span>Gallery</span></a></li>
</ul>
The menu id (#menu), have the background of the button and the width and heigh of the whole menu bar.
#menu span hide the text.
I will take the Home button and i explain how is made:
the id - #home set the value of the home button, with, height and no berder when i push click.
the id -#home a:hover - only change the background when the mouse is over (change the background of the 0px to the - 49px vertical);
the id - #home a:active - is active when click the button, this action sent us with the -98px down and show us the wgite background;
The next button, About Us in my case, must begin in continuing of the last button!
#menu {
background:url(menu_nav.png) no-repeat;
width:676px;
height:49px;
margin:0;
padding:0;
}
#menu span {
display:none;
}
#menu li, #menu a {
height:49px;
display:block;
outline:none;
}
#menu li {
float:left;
display:inline;
list-style:none;
}
#home {
width: 120px;
height:49px;
outline:none;
}
#home a:hover {
background:url(menu_nav.png) 0px -49px no-repeat;
}
#home a:active {
background:url(menu_nav.png) 0px -98px no-repeat;
}
#about {
width:166px;
height:49px;
outline:none;
}
#about a:hover {
background:url(menu_nav.png) -120px -49px no-repeat;
}
#about a:active {
background:url(menu_nav.png) -120px -98px no-repeat;
}
#gallery {
width:135px;
height:49px;
outline:none;
}
#gallery a:hover {
background:url(menu_nav.png) -286px -49px no-repeat;
}
#gallery a:active {
background:url(menu_nav.png) -285px -98px no-repeat;
}
#contact {
width:135px;
height:49px;
outline:none;
}
#contact a:hover {
background:url(menu_nav.png) -420px -49px no-repeat;
}
#contact a:active {
background:url(menu_nav.png) -420px -98px no-repeat;
}
Bye!
