Web-based UI components-menu (2)

Web-based UI components-menu (2)
Ui components based on web standards-menu (2)

In the first article of this article, we learned the availability and ease-of-use features of a "perfect" menu, and created basic XHTML and CSSCode. Next we will go deep into the Implementation Technology of some menu-related advanced features. The first is --

Indicates the menu items of the current activity

When a user clicks a menu item to enter the corresponding topic of the website, we usually want this menu item to show different visual features from other menu items, this allows users to clearly understand their "locations" without getting lost on the site. I have been wondering what kind of name should be given to this menu item. For now, it is called "current active menu item, if you have any good ideas, please leave a message on the right to tell me, thank you ^_^.

The current activity menu item plays an important role in creating a good user experience. A responsible UI Designer will never ignore it. There are at least two implementation methods: "direct indication" and "top-down indication ".

The "direct indication" method directly gives an appropriate class attribute to the Li element corresponding to the current active menu item, and then reloads the visual attribute of the general menu item for this class in CSS, make it Show "unique" visual characteristics. Taking the apache.org menu as an example, we have already clicked "DB" to enter the corresponding topic:

<LiClass = "active"> <A href = "// db.apache.org/" Title = "database access"> dB </a> </LI>

You only need to make such a small improvement on XHTML, And the CSS changes are not large, as long as you add such a paragraph:

Menu Li. Active A {background-color: # e8f3ff; Border: 1px solid # 05f ;}

View results (Example 9)

"Top-down indication" does not indicate its special identity directly on a menu item. Instead, it gives each menu item a name, and then gives the "upper level (such as body element)" of the menu item) "specifies which menu item is selected (similar to the Emperor's" lucky "nickname _^ ).

Let's take the previous articleArticleTake the "absolute positioning" menu in as an example. Assume that the "software" item is selected:

<BodyClass = "chlsoftware">
<Menu>
<Li id = "mimovie"> <a href = "/movie/" Title = "DVDRip"> movie </a> </LI>
<Li id = "mimusic"> <a href = "/music/" Title = "MP3"> music </a> </LI>
<Li id = "misoftware"> <a href = "/dl/" Title = "shared"> Software </a> </LI>
</Menu>
</Body>

The class of the Body element sets the channel (column) of the current page, that is, the meaning of the chlorophyll prefix here-channel. You can set the "lucky" rule according to this class ...... -_-|

Body. chlmovie li # mimovie A, body. chlmusic li # Music A, body. chlsoftware li # misoftware A {background-color: # e8f3ff; Border: 1px solid # 05f ;}

View results (Example 10)

If possible, I suggest using the second method for the following reasons:

1. Write backgroundProgramYou only need to determine the current topic and set the class for the body (how to determine? That's not my case ....);
2. Good scalability. It can be used not only to indicate the current active menu item, but also to provide information about the current status for other elements on the page. For example, if you want to make each topic have different dominant colors, you can know what to do ^ _ ^;
3. When the emperor is cool ......

Menu items with icons

Now our menus are still bald, and some friends may have doubts about how far the Web standard technology can go. Next, we will introduce the image to the menu creation. Let's start with the simplest-add an icon "" to the menu item. Based on the menu in Example 9, we can make some minor changes to the style of element:

Menu {
/* Define a as a block-level element to define the appearance using the box model attribute */display: block;
/* Define the size */width: 100%; Height: 20px;
/* Box model style */Background-color: # f6f6f6;Border: 1px solid # DDD;
/* Text style */font: 11px Arial; text-Decoration: none;
/* Vertical center */line-Height: 20px;
/* Horizontal center */Text-align: center;
/* Text indent */Text-indent: 20px;
/* Icon */Background: # f6f6f6 URL (I/arrow.gif) 5% 50% no-Repeat;}

View results (example 11)

There are three points to describe:

1. After the text is horizontally centered, the text in the menu items are arranged closely on the left. We need to leave some space for the icon. The commonly used method (also the easiest way to think of) is to use padding-left. However, this will face the IE box model bug. Although it is easy to solve, it is better to use text-indent, not to mention that there is no such bug to be handled.
2. Why don't I directly use the IMG label to insert the icon into the XHTML document? Because these icons are only decorative, and they are not the real "content" of the webpage, they are not suitable for appearing in XHTML code. In addition, it is easier to use the background image to save network traffic. Conversely, if the icon is a logo, such as the famous feather of Apache HTTP server, we recommend that you add it to the XHTML code (do not forget the alt attribute ), because it is the "content" that the webpage really wants to express ".
3. For more information about how to correctly set the background image, see the background section in the css2.0 Chinese manual of light rain. It should be noted that opera has some bad temper in positioning the background image. Please refer to another article of mine.

Background Image flip Technology

This is a very practical technology. When we are not satisfied with the simple box model style, we naturally think of using background images to create more personalized menu items. The implementation method is also very simple, we still make modifications on the basis of Example 9.

First, let's take a look at the effects of the two background images:

Normal State (bk01.gif ):
Mouse overlay (bk02.gif ):

CSS is not changed much either, so I will pick out the important ones (I started to be lazy ...... ^_^ ):

Menu A: Link, menu A: visited {Background: transparent URL (I/bk01.gif) 0 0 no-Repeat ;}
Menu A: hover, menu A: active {Background: transparent URL (I/bk02.gif) 0 0 no-Repeat ;}

View results (example 12)

Yes, that's easy. You only need to set the corresponding background image for the four states of Element. This method is enough to deal with a variety of weird menus, and can be used not only in menus, but also in any location where you need a strange link. However, this is not the perfect method, and it is even better.

First, we need to combine two background images (bk03.gif ):

Modify CSS again (here only the modified part is listed ):

Menu A {... Background: transparent URL (I/bk03.gif) 0 0 no-Repeat ;}
Menu A: Link, menu A: visited {Background: transparent URL (I/bk01.gif) 0 0 no-Repeat ;}
Menu A: hover, menu A: active {Background: transparent URL (I/bk02.gif) 0 0 no-Repeat;Background-position: 0-21px;}

View results (example 13)

Do you understand? In fact, only one image is used. When the mouse overwrites the event, the position of the image is moved up for a certain distance, indicating the red background of the lower half of the image. What are the advantages of doing so?

1. Easy to manage background images. A large website may need to use dozens or even hundreds of background images. Combining the background images can greatly facilitate management and maintenance.
2. It is closer to the production method of desktop software skin. In the development of css3, the most basic "jiugongge" technology in desktop software skin production has been introduced, and the webpage uidesign has obviously showed a tendency to move closer to the desktop software uidesign.
3. Saves network traffic. The preceding example shows a small background image of 0.47 K and A merged background image of 0.94 K. The sum of the two small images is also 0.94 K. What is the savings? We know that data is transmitted over the network in the form of an IP packet. Most of the IP packets are around 1 kb. For example, the size of each IP packet sent and received by my website server is 1024 bytes. Each graph requires at least one IP packet for transmission, so that two small graphs occupy 2 K of traffic, while one large graph only requires 1 k of traffic. For small and medium websites, the inbound and outbound traffic is nothing, but for websites with tens of millions of daily visits, "Saving traffic" is not just a matter of network traffic, but a real economic problem, do not pay attention to it.

Text Replacement Technology

Sometimes we need more visual effects on menu items. For example, no text is purely a graph or a rare font. You may say: I know, use a background image. That's right. You can use the above "background image flip technology" to implement it. But what about the text in element? It cannot continue to appear in the field of view. In this case, we need to use the "text replacement technology ".

For convenience, take my favorite "Pepsi" and "happy" as a simple menu:

<Menu>
<Li id = "milays"> <a href = "http://www.lays.com/" Title = "happy potato chips"> Lay's </a> </LI>
<Li id = "mipepsi"> <a href = "http://www.pepsi.com/" Title = "Pepsi"> Pepsi </a> </LI>
</Menu>

Then, use the background image flip technology to take the following image as the background.

View the effect (example 14 ). For specific implementation code, please view the source file by yourself. The technology used above is mentioned above.

Next, let's take a big note: remove the ugly lines with underscores. Let's first look at some ways to hide elements from the page:

1. Display: none. It seems so amazing. Not only does it hide the text, but it cannot find any link that can be clicked ...... -_-|
2. Visibility: hidden. Well, the text is gone, and the link is still ...... Unfortunately, the background image is gone!

What's the solution? I would like to introduce text-indent to you again. Let's see how it works (modified on the basis of example 14 ):

Menu {...Text-indent:-9999px;Text-Decoration: none ;}

View results (example 15)

OMG, I really admire the first person who came up with this method. Make the text indent 9999px, that is, move 9999 pixels to the left. Don't tell me your display has such a large resolution ^_^. The text-Decoration: None next to Firefox is used to prevent underline (you can remove it if you don't believe it ).

So far, IE6, Firefox, and opera have all performed well, but they haven't been completed yet. You will find that there are no points to be found in ie5 ...... In the past, ie5 moved the vertex area and text of the link to the left to-9999px, which is really troublesome-_-|. It is not difficult to solve the problem: use absolute positioning (this method was found by myself. If there are similarities, it is purely a hero's opinion. ^_^ ).

Menu Li {Position: relative;...}
Menu {Position: absolute;Top: 0; left: 0 ;...}

View results (Example 16)

Now everyone is satisfied. This article is coming to an end ...... Summary

Most of the technologies and ideas mentioned in this Article can not only be used on menus, for example, the "background image flip technology" is widely used. If you are learning web standards at the beginning, make a menu and familiarize yourself with these common technologies. If you already have some web standards practice experience, please pay attention to the various ideas mentioned in this article and believe that it will help you understand the goals and responsibilities of web standards. If you are an experienced expert, please be sure to point out the errors and deficiencies in this article. I am also exploring and summarizing them, and it is estimated that there will be no fewer defects.

Finally, I would like to thank my friends who have followed this article. When I am blank, I will write other web-based UI components.

Note: Are you satisfied with your menu requirements? Then your menu is really a bit Bt. Maybe an article I translated earlier can help me (this article also mentions another text replacement technology, although I think it is not very good ).