CSS Instance Tutorial: Simple slide navigation bar effect

Article Introduction: CSS Instance Tutorial: Simple slide navigation bar effect.

Because of the limitations of the font of the Web page and the need for the beautiful navigation bar, using Background-repeat to do a simple text navigation bar is far from enough. In many occasions, the background of the navigation bar is a pattern, the font is no longer a monotonous song, which requires us to make the overall effect of the navigation bar map in the Web page to use.

Today we will do a simple slide navigation bar effect (don't know what should be called it ^_^), the effect of the following figure:

Train of thought: by changing the link mouse hover state (hover) background picture, to achieve the mouse to put up a highlighted effect.

Method: In this example, we make it "appear to change" by adjusting the position of the background picture for each link hover state. (Don't understand?) Can understand "CSS sprites" first

First, organize the HTML code for the navigation bar.

<ul>
 <li id="itemA"><a href="#">首页</a></li>
 <li id="itemB" class="select"><a class="urlB" href="#">原创</a></li>
 <li id="itemC"><a class="urlC" href="#">关于54173BLOG</a></li>
 <li id="itemD"><a class="urlD" href="#">网站建设</a></li>
</ul>
//a元素中仍然保留文字，这样可以保证用户在加载不到css文件的情况下仍能看到基本的内容。
//每个链接的背景都不同，需要单独定义，所以这里给每个链接一个类。
//li元素的id本例中没有用到，但在实际使用中，可以配合js来实现对当前页面的高亮显示。

Secondly, the normal state of the navigation bar and the hover state to do the overall effect of the picture and a piece of image.

Do the drawing note: The two states in the navigation bar on the text relative to the background pattern of the same position, otherwise the transition effect is not smooth, and the same position for us in the CSS to control. (For this example, it is recommended that you do an effect first and then copy and then modify the color so that the text is not in the wrong position relative to the background.) ）
Another: If the link between spacing and so on, before the start of the calculation, so as to do a map step in place.

Finally, adjust the style through CSS to achieve the final effect. (View demo page)

. navbar {height:50px; padding-left:6px Overflow:hidden; Background:url (01.jpg) no-repeat;} /* Each a element can only display their own scope of the background, if there are blank, the elements have spacing, you need to define the background picture for navbar, otherwise blank, spacing can not see our pictures. */
. navbar li {display:inline;}
. NavBar Li a {float:left; height:50px; text-indent:-9999px; Background:url (01.jpg) no-repeat;} /* To hide the text in a element by text-indent, and to define a uniform background picture for all links. */
/* The following defines the width of the 4 links and the position of the background picture respectively. (In this case, the text is in the same horizontal position in the two states, where the background picture of each link two states is only a different vertical position, which makes it easier to control.) ）*/
. navbar Li A.urla {width:78px; background-position:-6px 0;}
. navbar Li A.urla:hover,.navbar li.select a.urla {background-position:-6px-50px;}
. navbar Li a.urlb {width:75px; background-position:-84px 0;}
. navbar Li A.urlb:hover,.navbar li.select a.urlb {background-position:-84px-50px;}
. navbar Li A.urlc {width:211px; background-position:-159px 0;}
. navbar Li A.urlc:hover,.navbar li.select a.urlc {background-position:-159px-50px;}
. navbar Li A.urld {width:126px; background-position:-370px 0;}
. navbar Li A.urld:hover,.navbar li.select a.urld {background-position:-370px-50px;}
/*background-position the order of two parameters: first horizontal, then vertical. "First around, back up and down" easy to remember wrong. */

So far, the slide navigation bar is finished. For reference code, see the source code for the demo page.

In this example:
The Li element and the a element therein can also control the position by other means;
The Li element and the a element are given the ID and class respectively, and may be simpler;
Each link's hover status background picture position is different, need to be defined separately, that is to say you can also separate them without always being connected;
And if the two state of the picture to save two pictures to use, the amount of code is similar, the benefits of CSS sprites can not be reflected.

Perhaps you have a better way, or found that there are errors in this case, please do not hesitate to enlighten me.
Welcome to 54173BLOG Exchange more CSS, HTML related knowledge.

54173BLOG original article, reprint please keep this article link: http://www.54173.cn/blog/?p=255