11th days: no table menus

Document directory

• 1. Do not use table menus (vertical)
• 2. Do not use the table menu (horizontal)

After the layout was initially set up, I began to fill in the content. First, define the logo image:

Style Sheet: # logo {MARGIN: 0px; padding: 0px; WIDTH: 200px; HEIGHT: 80px ;}
Page code: <div id = "logo"> <a title = "web designer" href = "http://www.w3cn.org/"> </a> </div>

The above code should be easy to understand now. Define a logo layer in CSS and call it on the page. It should be noted that, in order to make the web page easier to use, the web standard requires that you add an alt attribute to all images with formal content. This alt attribute is used to describe the function of an image (when the image cannot be displayed, the text is displayed and replaced). Therefore, do not write only meaningless image names.

Next, define the menu.

1. Do not use table menus (vertical)

Let's first look at the final effect of the menu:

• What is website standards
• Benefits of using standards
• How to transition
• Related tutorials
• Tools
• Resources and links

Generally, at least two layers of tables are nested to implement such a menu. The interval line is implemented by setting the background color in td and inserting a 1 px high transparent GIF image; the alternate effect of the background color is implemented by the onmouseover event of td. However, to view the Page code of this menu, you can see only the following sentences:

<Div id = "menu">
<Ul>
<Li> <a title = "website standard" href = "http://www.w3cn.org/webstandards.html"> what is website Standard </a> </li>
<Li> <a title = "standard benefits" href = "http://www.w3cn.org/benefits.html"> use standard benefits </a> </li>
<Li> <a title = "How to transition" href = "http://www.w3cn.org/howto.html"> How to transition </a> </li>
<Li> <a title = "related tutorials" href = "http://www.w3cn.org/tutorial.html"> related tutorials </a> </li>
<Li> <a title = "tool" href = "http://www.w3cn.org/tools.html"> tool </a> </li>
<Li> <a title = "Resources and links" href = "http://www.w3cn.org/resources.html"> resources and Links </a> </li>
</Ul>
</Div>

No table is used, but no sequence is used <li>. The secret to implementing the effect of the entire menu is id = "menu". Let's take a look at the menu definition in CSS:

(1) first, the main style of the menu layer is defined:

# Menu {
MARGIN: 15px 20px 0px 15px;/* defines the outer border distance of the layer */
PADDING: 15px;/* defines the layer's internal border as 15px */
BACKGROUND: # dfdfdf;/* defines the BACKGROUND color */
COLOR: #666;/* define the font COLOR */
BORDER: # fff 2px solid;/* defines the BORDER as a 2px white line */
WIDTH: 160px;/* defines the content WIDTH as 160px */
}

(2) Next, define the unordered list style:

# Menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none;/* Do Not Display Borders */
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;

}
# Menu li {BORDER-TOP: # FFF 1px solid; MARGIN: 0px ;}

Note: Here is the definition of the derived method of the id selector (refer to the introduction to 7th days: CSS) the style of the child elements <ul> and <li> in the menu layer. LIST-STYLE-TYPE: none indicates that the default STYLE of the unordered LIST is not used, that is, the dot is not displayed (we use our own icon to replace the DOT ). BORDER-TOP: # FFF 1px solid; defines the 1px interval between menus.

(3) define the onmouseover Effect

# Menu li {
PADDING: 5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
# Menu li a: hover {BACKGROUND: url (images/icon_dot_lmenu2.gif) # c61c6 no-repeat 2px 8px;
COLOR: # fff ;}

Explanation:

• "Display: block;" indicates that tag a is displayed as a block-level element, making the link a button;
• "BACKGROUND: url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;" this sentence defines the icon that replaces the small dots of li. "Transparent" indicates that the background is transparent. "2px 8px" indicates that the icon is 2 Px to the left and 8 Px to the top. This sentence can also be split into four sentences: "BACKGROUND-IMAGE: url (images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent ;"
• "# Menu li a: hover" defines the color changes and small icon changes after the mouse moves over the link.

OK. You do not need to use the table menu. You can obviously feel that all the display styles originally written in HTML are stripped and put into the CSS file. The page code saves more than half. It is easy to modify the menu style through CSS.

2. Do not use the table menu (horizontal)

The vertical menu is shown above. Can I use li to display the horizontal menu? Of course it works. The following code shows the effect at the top of this page:

Page code

<Div id = "submenu">
<Ul>
<Li id = "one"> <a title = "Home" href = "http://www.w3cn.org/"> Home </a> </li>
<Li id = "two"> <a title = "About Us" href = "http://www.w3cn.org/aboutus.html"> about us </a> </li>
<Li id = "three"> <a title = "website standards" href = "http://www.w3cn.org/webstandards.html"> website standards </a> </li>
<Li id = "four"> <a title = "standard benefits" href = "http://www.w3cn.org/benefits.html"> standard benefits </a> </li>
<Li id = "five"> <a title = "How to transition" href = "http://www.w3cn.org/howto.html"> How to transition </a> </li>
<Li id = "six"> <a title = "related tutorials" href = "http://www.w3cn.org/tutorial.html"> related tutorials </a> </li>
<Li id = "seven"> <a title = "tool" href = "http://www.w3cn.org/tools.html"> tool </a> </li>
<Li id = "eight"> <a title = "Resources and links" href = "http://www.w3cn.org/resources.html"> resources and Links </a> </li>
<Li id = "nine"> <a title = "FAQ" href = "http://www.w3cn.org/faq.html"> FAQ </a> </li>
</Ul>
</Div>

Style Sheet code

# Submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: # fff 1px solid;
BACKGROUND: # dfdfdf;
COLOR: #666;
HEIGHT: 25px ;}

# Submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING: 0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY: inline;
}

# Submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}

# Submenu li {
DISPLAY: block;
PADDING: 2px 3px 2px 3px;
BACKGROUND: url (images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}

# Submenu li a: hover {
BACKGROUND: url (images/icon_dot_lmenu2.gif) # c61c6 no-repeat 2px 8px;
COLOR: # fff ;}

# Submenu ul li # one A {WIDTH: 60px}
# Submenu ul li # two A {WIDTH: 80px}
# Submenu ul li # three A {WIDTH: 80px}
# Submenu ul li # four A {WIDTH: 90px}
# Submenu ul li # five A {WIDTH: 80px}
# Submenu ul li # six A {WIDTH: 80px}
# Submenu ul li # seven A {WIDTH: 60px}
# Submenu ul li # eight A {WIDTH: 90px}
# Submenu ul li # nine A {WIDTH: 80px}

The above code is not analyzed one by one. The key to the horizontal menu is the "FLOAT: left;" statement when the <li> style is defined. In addition, note that the DISPLAY: inline In UL definition indicates that li is forcibly presented as an inline object and the row is deleted from the object. In general, li does not wrap the line. Horizontal arrangement. You can also define the width of each sub-menu in the example to control the menu interval. Well, you can also try it and use li to implement various menu styles.

Tips: if the sum of width of your sub-menu is greater than the width of the layer, the menu will be automatically folded. This principle can be used to create two or three columns of a single unordered list, this is hard to implement in HTML.

Thanks to zhuweiwei for pointing out the bug in the horizontal menu. This article was fixed on April 9, July 6.