Web front-end development Combat 4: navigation menu (i)

In the previous blog post we mentioned the horizontal level menu, here we take a look at the navigation menu. There are many kinds of navigation menus, but the principle of production is Datong

Small different, it is easier to see than the two drop-down menu. Look at some of the navigation menus on the website:

Vertical navigation Menu:

Horizontal navigation Menu:

A vertical menu

Production principle: (1) build menus with unordered lists; (2) settings for <a> Tags: ul Li A{display:block;}. The key to the definition is to set the <a> tag to

Block element.

Code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Effect Show:
State of initialization or mouse leave:

Mouse on the state:

Two-level menu
Production principle: On the basis of the vertical menu, the LI element is left floating set. because the LI element floats out of the original document flow, it loses width and height, because
It is important to use the Display:block property on the a element to make it a block-level element, and then to set the width and height.
Just change the CSS style code:
/*CSS Global Settings */*{   margin:0;   padding:0;   font-size:16px;   Font-family: "Microsoft Jas Black";}. nav{   height:40px;   margin-top:50px;   margin-left:10px;}. Nav ul{   List-style:none;} /* Set the key */.nav li{   float:left;}. Nav Li a{    background-color: #EEEEEE;    Text-decoration:none;    Color: #000000;    Display:block;    width:90px;    height:40px;    line-height:40px;    Text-align:center;    margin-right:1px;}. Nav Li a:hover{    background-color: #FF6600;    Color: #FFFFFF;}
Effect Show:

Three-fillet menu
Production principle: On the basis of the horizontal menu we make CSS fillet property settings, but ie6,7,8 browser does not support this property, make a certain
To consider browser compatibility, here we use the Fillet property. The way to resolve incompatibilities is that we can crop the rounded background image as each Li element
Background.
The complete code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Effect Show:
State of initialization or mouse leave:

The state of the mouse move up:





Web front-end development Combat 4: navigation menu (i)