Web-based UI components-menu

Menu is one of the most basic and common web UI elements. Its main functions include:

1. Guides users to discover website content;
2. Assists users in performing a specific operation.

A complete menu is a set of menu items. All menu items should be logically parallel and hierarchical, they point to content or functions that are not affiliated with each other.

A menu item can be a link or a set of menu items, that is, a sub-menu ).

Text Design of menu items

1. Clear: Clearly expressing the meaning is the most basic requirement of a menu item text.
   Based on the two basic functions of the menu, the menu item "pointing to content" should preferably be a noun or noun phrase (such as "Poetry" or "Classical Novels") that summarizes the content "), the menu item of "perform Operation" is preferably a verb or a verb phrase (such as "subscribe" or "subscribe to News ").
2. Straightforward: If all websites are for users, come and talk to them in the vernacular they are used.
   For example, a portal website provides online video services for broadband users. The menu item pointing to this service is "Broadband ". Most Internet users in China are relatively beginner and do not understand technology. Therefore, "videos" or "online videos" are more explicit to them (if it weren't for "small movies, otherwise, the word may be more appropriate ).
3. Brief: If you need more explanation of the "short" principle, you should not ignore "clear" and "straightforward" for the sake of "short ".

Basic XHTML Structure

Among the many XHTML labels, there is a tag ignored by 99.99% designer and 99.98% developer:menu. Its usage andulLikewise, it can contain a seriesliElement to form a menu item, so it is more appropriate to use it to build a menu. As follows:

<Menu> <li> <a href = "/movie/"> movie </a> </LI> <li> <a href = "/music/"> music </A> </LI> <li> <a href = "/software/"> Software </a> </LI> </menu>

View results (Example 1)

Please note that,menuThe tag does not exist in XHTML strict. We recommend that you useulTo replacemenu. If your doctype is XHTML transitional, usemenuIt is completely okay (including passing verification ). In this article, I will usemenuLabel.

Menu item prompt

When designing the menu item text, "short" and "clear" are a pair of contradictions. If you cannot clearly say a few words, you need "menu item prompt. When you hover your mouse over a menu item, a prompt is displayed, which further describes the content and functions of the menu item.

In XHTMLtitleAttribute is used to provide this function to improve availability:

<A href = "/movie/" Title = "latest cinema Movie Download"> movie </a>

View results (Example 2)

Simplest menu

So far, we have written the XHTML code for the menu and considered the accessibility and ease of use issues, but of course it cannot be called a menu that can be used. However, some people use such menus, such as apache.org, the BT technical organization @ _ @. Let's help them change the menu to a better view.

FirstmenuIndent effect andliRemove the preceding vertex and define a proper width:

menu{margin:0;padding:0;list-style:none;
width:120px;}

View results (Example 3)

Set the box model style for the menu item. Note the differences between IE and Firefox/opera in the Box Model:

Menu Li {/* Height 20px */height: 20px;/* defines the interval between each menu item and use it! Important * // * solves the box model difference between IE and gecko browsers */margin-bottom: 4px! Important; margin-bottom: 2px ;}

Next is the most critical step. Please read the notes carefully.

Menu A {/* defines a as a block-level element, so that you can use the box model attribute to define the appearance */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 text center */line-Height: 20px; /* horizontal text center */Text-align: center ;}

View results (Example 4)

Next, you can easily set the style of the link in four states so that the menu can interact with the mouse-covered event:

menu a:link,menu a:visited{color:#333;}menu a:hover,menu a:active{color:#F50;}

View results (example 5)

You can also make the mouse effect more obvious, such as changing the background color:

menu a:hover,menu a:active{background-color:#FFEFE6;border:1px solid #F60;}

View results (Example 6)

Horizontal menu

There are two ways to create a horizontal menu: Floating and absolute positioning.

The concept of the floating method is very simple: Let every menu item float to the left, and finally form a horizontal row. We only need to make some small changes to the CSS above:

Menu {/* remove the menu width. If your page has a width limit, you can set it here */margin: 0; padding: 0; List-style: none ;} menu Li {/* specify the length and width of li */height: 20px; width: 120px;/* float left */Float: left;/* Set the interval between menu items */margin-Right: 4px! Important; margin-Right: 2px;/* solves the box model difference between IE and gecko browsers */margin-bottom: 4px! Important; margin-bottom: 2px ;}

View results (Example 7)

This method not only allows you to easily create a horizontal menu, but also uses it to list similar content in "flow layout". It is a widely used layout method.

Let's talk about the "absolute positioning" method. Many people (including some people with rich web standards and practical experience) have an inexplicable dislike of absolute positioning, I don't know why. In fact, it is an extremely important CSS layout method. As long as you have a little bit of tips in use, you will not encounter frustrating layout disorder or other strange results. Of course, I am not saying that absolute positioning is omnipotent. "The right is the best". The time to use it depends on the specific situation.

Return to the menu creation. If your menu items are of different lengths or fluctuations, you can use absolute positioning to implement them when there are no rules. First, make some minor changes to the above XHTML: one for each menu itemid:

<Menu> <liId = "mimovie"> <A href = "/movie/" Title = "DVDRip"> movies </a> </LI> <liId = "mimusic"> <A href = "/music/" Title = "MP3"> music </a> </LI> <liId = "misoftware"> <A href = "/dl/" Title = "shared"> Software </a> </LI> </menu>

The IDS of the three menu items have a common prefix-mi (abbreviation of menu item), which is used to distinguish it from the IDs of other elements. This naming method is purely my personal preferences and comes from my previous habits of developing software with Delphi and VB. Other abbreviations include MNU (menu, menu), BTN (button, button), pnl (panel, Panel), LST (list, list), tab (Tab menu, Tab) and so on. This can effectively preventidThe names are repeated. In CSS, you can view the UI type of the element only.

The next step is CSS. FirstmenuFixed length and width, removed indentation, and so on:

menu{width:360px;height:20px;margin:0;padding:0;}

The next step is very important.menuSpecify as relative location:

menu{position:relatvie;width:360px;height:20px;margin:0;padding:0;}

If you skip this step, you will find that the "absolute positioning" of the menu item is notmenuIt is a reference object, but a coordinate origin in the upper left corner of the browser window. Of course this is not what we want.

Set the common attributes and the same ordinate values of the menu items:

menu li{position:absolute;top:0;list-style-type:none;width:120px;height:20px;line-height:20px;text-align:center;}

Last useidSelect a single menu item to specify the abscissa property of its "personality:

#miMovie{left:0;}#miMusic{left:120px;}#miSoftware{left:240px;}

View results (Example 8)

Absolute PositioningaThe label definition is basically the same as the Floating Method. Please check the source code of Example 8.

The technologies and skills mentioned above are sufficient to deal with general menu creation. apache.org should also be satisfied with the modified menu ^_^. In the next article, I will introduce the advanced applications and skills for creating menus Based on Web standards in more detail.

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 corresponds to the current active menu item directly.liAn appropriate elementclassAttribute in CSS.classReload the visual attributes of a general menu item to show "unique" visual features. Taking the apache.org menu as an example, we have already clicked "DB" to enter the corresponding topic:

<li class="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 first names each menu item, and thenbody"Element)" specifies which menu item is selected (quite similar to the Emperor's "lucky" nickname _^ ).

Let's take the menu using "absolute positioning" in the previous article 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>

　　bodyElementclassSet the channel (column) of the current page, that is, the meaning of the forward prefix -- channel. Based on thisclassYou can set the "lucky" rule ...... -_-|

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. It is convenient to write background programs. You only need to determine the current topicbodySetclassYou can (how to judge? 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 9aMake some minor changes to the element style:

Menu A {/* defines a as a block-level element, so that you can use the box model attribute to define the appearance */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 common method (which is also the easiest to think of) is to usepadding-left. However, this will face the bug of the IE box model. Although it is easy to solve, it is always better to usetext-indentNaturally, no bugs need to be handled.
2. Why not use the icon directly?imgInsert tags 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, it's that simple.aSet the corresponding background image for the four states of the 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. HoweveraWhat about the text in the 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 myself to you againtext-indent. Let's see how it works (modified on the basis of example 14 ):

menu a{...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 ^_^. Thetext-decoration:noneIt is to prevent Firefox from being underlined (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 a{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 ).