css 背景图片定位在菜单效果中的应用实例

这款菜单大家需要注意HOVER状态下背景图片定位发生了变化，从而实现了这样的效果。

本实例是一位国外的朋友所写，不进行任何翻译，直接发出来，大家可以偿试阅读，如果遇到困难可以求助于翻译软件。
不断的提高自己的英文阅读能力也是我们一直所提倡的，让我们一起努力吧！

Overview
　　Here are the required graphics to assembe the menu


1. Ma background
　　Open the Photoshop file. Turn off the menu text Layer Group and save the ma background as menu-bg.jpg.


2. Button graphics
　　Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the "home" item, go to menu Edit > Copy Merged (Cmd + Shift + C).


　　Create a new file and take note of the file dimension (w x h), my case the "home" graphic is 144 x 58px. Paste the "home" graphic the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes the upper layer.


　　Here is how the hover effect will work. We will set the lk button to 144 x 58px, when mouseover, we will shift the background image from to bottom.


　　Repeat this step for the other buttons. You should have the follow graphics:


3. HTML source
　　When you are done with the graphics, let’s start codg. Start with an un-ordered list <ul>.
　　● note there is an id="menu" assigned to the<ul> tag
　　● an unique class name assigned to each lk <a>
　　● an empty <span> tag (the purpose of this is to make the mouseover effect)


#menu
　　Reset the menu to no paddg, no marg, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key pot to remember here is set the position property to relative.


#menu span
　　Specify the span element to display:none (so they will be visible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.


#menu a
　　The key pot here is the text-dent property. We specify the text-dent property with a negative value (-900%), so the text will be hidden.


#menu a:hover
　　When mouseover the lk, we want to shift the background image from to bottom.


#menu a:hover span
　　When mouseover the lk, we want the span element to display:block.


#menu .home
　　Specify the width, height, and background image. Sce we already specified all <a> element postition:absolute previous step, now just say where the .home button should be by specifyg the left and property.


#menu .home span
　　Here we are specifyg the width, height, background, and position of the span element of .home (mouseover GIF image)


#menu .about
　　Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and property.


#menu .rss
　　Repeat this step for .rss


All one: