Go to web-based UI components-menu (1)

Ui components based on web standards-menu (1)

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)

Most people may use (or already use)UlTo build your own menu XHTMLCodeBut now you know that there is a tag calledMenuPlease change it. (the original version is good. ^_^ ).

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;
/* Define the interval between each menu item and use it! Important */
/* Solve 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 {
/* Define a as a block-level element to easily 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 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 it to the left */Float: left;/* Set the interval between menu items */margin-Right: 4px! Important; margin-Right: 2px;
/* Solve 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 that of the Floating Method. For details, refer toSource code.

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 articleArticleIn this section, I will introduce more advanced applications and skills for creating menus Based on Web standards.