In this navigation, the navigation matrix technology is used to solve the challenges posed by image replacement and multiple States. The navigation matrix combines a single graph image and a set of styles to convert an unordered list to a menu with an image replaced. This technology moves the image around each list item through the "background-position" attribute to ensure that the part of the image indicating the list item and its status is displayed.
One of the additional advantages of using a single image in navigation is that it provides a rapid response to the mouse hover state. When the browser loads an image in the mouse hover state, there is no latency. The following figure shows the implementation example. The image needed is as follows:
Image Size:
1. htmlCode:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">2. CSS Code
/* CSS style sheet for [ced-tabs.html] created by [serein_chan] Email: [Serein_Chan@foxmail.com] author blog: [http://blog.csdn.net/cxwen78#//#annotation */# nav {width: 767px; /* the image replacement ensures that the menu has a fixed width and height */height: 30px; position: relative;/* indicates that the sorting list is relative, reference the link position in */Background: URL (images/menu.jpg);/* Add menu image */margin: 0; padding: 0 ;} # nav Li {float: Left;/* The list items float left to eliminate the blank bug left by IE bilateral margin */}/* set the style for the link element */# nav Li a {position: absolute; top: 0; margin: 0; padding: 0; display: block;/* block-level element */height: 30px; /* set height */Background: URL (images/menu.jpg) No-Repeat;/* Add a background image */Text-indent:-9999px; /* remove text from the page */overflow: hidden;/* hide part of the image beyond the area */font-size: 1% ;} /* locate the link element of each specific list item and move the image. * specify the width and use the left attribute, that is, the left offset, place it in an accurate position * move the background image. * Precise calculation of the exact position of each list item and movement of the image */Li # nav_hom A {left: 0; width: pixel; Background-position: 0 0;} li # nav_map A {left: margin PX; width: margin PX; Background-position:-margin PX 0;} li # nav_jou A {left: 221px; width: 129px; background-position:-221px 0;} li # nav_his A {left: 350px; width: 131px; Background-position:-350px 0;} li # nav_ref A {left: 481px; width: 153px; Background-position:-481px 0;} li # nav_con A {left: 634px; width: 133px; Background-position:-634px 0 ;} /* set the label transition status when hovering over the mouse, that is, move the background image to the left and raise it up */Li # nav_hom A: hover {background-position: 0-30px ;} li # nav_map A: hover {background-position:-112px-30px;} li # nav_jou A: hover {background-position:-221px-30px;} li # nav_his: hover {background-position:-350px-30px;} li # nav_ref A: hover {background-position:-481px-30px;} li # nav_con A: hover {background-position: -634px-30px;}/* use the ID attribute on the Body element and associate it with the ID of a specific list item, enable "Current Position" * on the navigation bar to move the background image up, just as if you were processing the mouse hover status */# body_hom li # nav_hom A {background-position: 0-60px;} # body_map li # nav_map A {background-position:-pixel PX-60px;} # body_jou li # nav_jou A {background-position:-221px-60px ;} # body_his li # nav_his A {background-position:-350px-60px;} # body_ref li # nav_ref A {background-position:-481px-60px ;} # body_con li # nav_con A {background-position:-634px-60px ;}3,
Refer:《The
Art & Science of CSS"
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
