Web-Standard UI components-menus (1)

Web|web Standard | menu UI Components Based on Web standards-menu (1)

menu is one of the most basic and common Web UI elements, and its main features include:

1. Guide the user to discover the content of the website;
2. Assists a user in performing a specific operation.

A complete menu is a collection of menu items, all of which should logically be a side-by-side relationship that points to content or functionality that does not have a subordinate relationship to each other.

A menu item can be a link, or it can be a collection of another set of menu items, a Level two menu (sub-menu).

the Copy design of the menu item

1. clear: to express the meaning clearly is a menu of a single copy of the most basic requirements.
   Depending on the two basic functions of the menu, "the menu item that points to content is best a noun or noun phrase (such as" poetry "," classical novel ") that is a generalization, and the menu item" Perform an action "is preferably a verb or an object phrase (such as" subscribe "," subscribe to News ").
2. straightforward : All sites are for users to see, according to the user's habit of vernacular to communicate with them bar.
   For example: A portal site provides an online video service for broadband users, and the menu item on the service says "broadband". Most Internet users in China are relatively junior and not technically literate, so using video or online video will make them more explicit (if the word "little movie" has some other meaning, it might be more appropriate).
3. Short : If the "short" principle requires more explanation, it is not to "short" and ignore the "clear" and "straightforward."

Basic XHTML Architecture

In a large list of XHTML tags, there is a label that is ignored by the 99.99% designer and 99.98% Developer: menu . It uses the same as the ul internal can contain a series of li elements to form a menu item, so it is appropriate to use it to build menus. As follows:

<menu><li><a href="/movie/">电影</a></li><li><a href="/music/">音乐</a></li><li><a href="/software/">软件</a></li></menu>

　　viewing effects (Example 1)

Probably most people will use (or have used) ul to build their own menu XHTML code, which is good, but now you know that there is a tag called menu , quickly change it (original good Ah ^_^).

menu item Hints

When designing a menu item copy, "Short" and "clear" are a pair of contradictions, in the case of a few words can be said very clearly, the need for "menu item hint (Tooltip)". When the mouse hovers over a menu item, it prompts for a further description of the contents and functions of the item.

Attributes in XHTML title are used to provide this functionality to improve usability:

<a href="/movie/" title="最新院线电影下载">电影</a>

　　viewing effects (Example 2)

The simplest menu

So far we've written the XHTML code for the menu and considered accessibility and usability issues, but it's certainly not a menu that can be shot. However, some people have such a menu out of use, such as apache.org this BT technical organization @_@, below we will help them to change a little better to watch the menu.

First menu Remove the indentation effect and the li previous point, and define a suitable width:

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

　　viewing effects (example 3)

Then set the box model style for the menu item, note the difference between IE and firefox/opera on the box model:

menu li{/*高度20px*/height:20px;/*定义每个菜单项之间的间隔，并用!important*//*解决IE与Gecko浏览器之间的盒模型差异*/margin-bottom:4px !important;margin-bottom:2px;}

Next is the most critical step, please read the comments carefully.

menu a{/*定义a为块级元素，方便用盒模型属性定义外观*/display:block;/*定义尺寸*/width:100%;height:20px;/*盒模型风格*/background-color:F6F6F6;border:1px solid #DDD;/*文字样式*/font:11px arial;text-decoration:none;/*文字垂直居中*/line-height:20px;/*文字水平居中*/text-align:center;}

　　viewing effects (example 4)

Next, it's easy to set up the links in four states of the style, so that the menu can interact with the mouse override event:

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

　　viewing effects (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;}

　　Viewing effects (example 6)

Landscape Menu

There are roughly two ways to make a horizontal menu: floating and absolute positioning.

The idea of floating is simple: make each menu item float to the left and end up in a horizontal line. We just need to make some small changes to the above CSS:

menu{/*去掉menu的宽度，如果你的页面有宽度限制，那么也可以设在这里*/margin:0;padding:0;list-style:none;}menu li{/*指定li的长与宽*/height:20px;width:120px;/*让它向左浮动*/float:left;/*设置菜单项之间的间隔*/margin-right:4px !important;margin-right:2px;/*解决IE与Gecko浏览器之间的盒模型差异*/margin-bottom:4px !important;margin-bottom:2px;}

　　Viewing effects (example 7)

This method not only makes it easy to create a horizontal menu, but also uses the idea of listing similar content in "Flow Layout", which is a widely used layout method.

Again, the "absolute positioning" method. Many people (including some of the web-standard practice-rich people) have a baffling aversion to absolute positioning, I don ' t know why. In fact, it is an extremely important CSS layout method, as long as the use of a little bit of tips, you will not encounter frustrating layout confusion or other strange results. Of course, I do not mean that absolute positioning is omnipotent, "the right is the best", when the use depends on the specific circumstances.

Back to the production of the menu, if your menu items of varying lengths, or highs and lows, in short, is not so regular time, you can use absolute positioning to achieve. First you need to make some minor changes to the XHTML above: give each menu item one id :

<menu>  id="miMovie"><a href="/movie/" title="DVDRip">电影</a></li>  id="miMusic"><a href="/music/" title="mp3">音乐</a></li>  id="miSoftware"><a href="/dl/" title="共享">软件</a></li></menu>

The ID of three menu items has a common prefix--mi (that is, the abbreviation for menu item), which is used to differentiate the IDs of other elements. This type of naming is purely my personal preference, from the previous use of Delphi and VB to develop software habits. Other abbreviations include mnu (menu, menus), BTN (button, buttons), PNL (panel, panels), LST (list, lists), Tab (Tab menu, tab), and so on. The advantage of this is that you can effectively prevent the id naming duplication, while in the CSS you can see the element's UI type just by looking at the name.

The next step is the work of CSS. First to menu set a long width, remove indentation and so on:

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

The next step is important to menu specify as relative positioning:

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

If you skip this step, you will find that the menu item's "Absolute positioning" is not a menu reference object, but rather the upper-left corner of the browser window as the coordinate origin, of course, this is not the effect we want.

Then set the Common properties of the menu items and the same ordinate:

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

Finally, id Select a single menu item to specify its "personality" Horizontal axis attribute:

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

　　viewing effects (example 8)

The definition of absolute positioning for a labels is basically consistent with the Float method, please check the source code for example 8.

The techniques and techniques described above are sufficient to cope with the general menu production, apache.org should also be satisfied with our modified menu ^_^. In the next article I will describe in more detail the advanced applications and techniques for making menus based on web standards.

Turn from: Dynamic Network production guide www.knowsky.com