Web site navigation is the most important element of the site, is the site to provide users with the most direct and convenient access to the content of the Web site tools. Site navigation from the form mainly by horizontal navigation, vertical navigation, drop-down and multi-level menu navigation of the third form.
As the design of the portal site, the navigation is generally guided by horizontal navigation. Because there are more text below the portal site, and each channel has a style to distinguish, so at the top of a fixed area design unified style and do not occupy too much space navigation is the most ideal choice, most of the domestic portals are adopted this form.
Vertical navigation is no longer popular in the design of portal sites, and vertical navigation is more likely to express product classification.
Drop-down navigation is mainly used for complex web sites. It's also common on some sites.
In general, the core goal of navigation is to design a simple and efficient operation of the portal, to help users quickly reach the content of the site, the design should be based on the type of site and content needs to design a reasonable navigation form. Here we will use CSS to design the three common navigation forms, and see how CSS implements these styles.
Horizontal navigation
The use of CSS layout in the form of navigation and table layout is very different, the site in addition to page layout, the most important part is the navigation, in this step should be made a simple and crisp navigation system, and then step-by-step complete with the design effect of the final navigation. Here we start with the first design style of the top, navigation as a horizontal navigation form. Before we start to make CSS navigation, let's think about the traditional table-style navigation. If the table format implements the navigation as shown in the diagram, you need to design a table. Navigation currently consists of 7 columns, you need to design a 1-row 7-column table, and in each cell <td></td> tag insert navigation text, and then the text of each cell centered, you can look at the implementation code:
Program code---[WWW.AA25.CN]
<table width= "100%" border= "0" cellpadding= "0" cellspacing= "0" >
<tr>
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/index.asp" > Home page </a></td >
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_4.html" >DIV+CSS course </a ></td>
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_5.html" > Common code </a> </td>
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_6.html" > Crystal icon </a> </td>
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_7.html" > Slide picture </a> </td>
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_10.html" > Software downloads </a> </td>
<TD align= "center" ><a href= "http://:www.aa25.cnhttp://www.jb51.net/css2/" >css2.0 Practical manual </a></ Td>
</tr>
</table>
</body>
You can see through the code, set the width of the table, and set the border margin to 0 so that you can hide the table line, and then make the text alignment of the first cell centered, a simple navigation, the main point is to design a table similar to the navigation form, the navigation in each of the data. Let's take a look at how to design the same navigation system with CSS.
The core of the DIV+CSS layout is to achieve the separation of performance and content, first of all, to understand the content part of the code to write the way:
Program code---[WWW.AA25.CN]
<ul id= "NAV" >
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/index.asp" > Home </a></li>
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_4.html" >div+css tutorials </a></li >
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_5.html" > Common code </a></li>
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_6.html" > Crystal icon </a></li>
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_7.html" > Slide picture </a></li>
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/Sort/List_10.html" > software download </a></li>
<li><a href= "http://:www.aa25.cnhttp://www.jb51.net/css2/" >css2.0 Practical manual </a></li>
</ul>
This code uses a new element of UL, before navigating, a brief understanding of the UL element. UL is a CSS just use a very wide range of elements mainly used to describe the list type content, each <ul></ul> means that the content of which is a list block, the block of each list of data in <li></li> to describe, You can look at the implementation of the UL without any style display effect.
As shown in the figure, as a list of content, the UL default style on the dot-like ordinal number, and the default is from top to bottom arrangement. Why should our navigation system use the UL element? In fact, navigation is also a kind of list, can be understood as a navigation list, each list of data is a navigation channel, can also use the two-layer nested div to achieve a navigation code structure, but relative to the UL list, Div appears too complex, the use of UL or should focus on the block-type region, And for simple only text navigation, UL is more lightweight and flexible.
In the code we also define a UL id called NAV, then for this UL and the following objects to write code to achieve the desired navigation effect.
The first paragraph of the style to write to the UL under the Li object, we want the list of each one of the list items no longer adhere to its default from top to bottom arrangement, so give #nav li specified Foat:left properties, like the foat:left of Div; It is also the principle of floating positioning allows itself to float to the left, so that the next object to the right side of the object, and eventually all Li has a floating left me, thus form a horizontal arrangement.
The key to navigation is the style control of a linked object, where the #nav Li a{} is used to write styles for each A-linked object under Li:
Display:block is the focus here, it makes a linked object display from a paragraph of text to a block object, and IDV characteristics of the same, div default is a block object, a linked object default state is a normal text, There is no way to make a linked object can act like a square block button, after using Display:block, a linked object will be able to become a block object like Div and other elements, you can use the outer margin of the CSS, Attributes such as inner margin add a series of styles to a link tag.
Through the application of display:block, we let a LABEL element have width width:97px, height height:22px, and use margin-left:2px between each A; the outer margin of the left side is 2px.
The display property is an attribute of the object display mode operation in CSS. Mainly with an example of the display of variable objects, in CSS, all objects have their own default display mode, such as a and span objects, they default to a midday inline object, display they will not affect the display of any other objects, When the span is applied, the contents of the span are automatically arranged on the right side of the span, like a piece of text, and the default display of objects such as Div is a block submachine gun, which occupies a line of space by default and is displayed in a page like a square, through Display:block, The A also becomes a block object. In addition, display there are many ways to use will be gradually learned in the future.
<style> #nav li {float:left;} #nav li a {color: #000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; Text-align: Center Background-color: #ececec; margin-left:2px;} </style> <ul id= "nav" > <li> home </li> <li>div+css tutorial </li> <li> Common generation Code </li> <li> Crystal icon </li> <li> slide picture </li> <li> software download </li> <li>c SS2.0 Practical Manual </li> </ul>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Preview the effect, already like a navigation, but there is no response to the mouse to move up, so for the user experience is very unfriendly, so you need to use some interactive feedback action to prompt the user object is clickable:
#nav li a:hover {background-color: #bbbbbb; color: #ffffff;}
This preview effect, with the mouse to move on a channel, the response appears, so that our navigation has become more friendly.
<style> #nav li {float:left;} #nav li a {color: #000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; Text-align: Center Background-color: #ececec; margin-left:2px;} #nav li a:hover {background-color: #bbbbbb; color: #ffffff;} </style> <ul id= "nav" > <li> home </li> <li>div+css tutorial </li> <li> Common generation Code </li> <li> Crystal icon </li> <li> slide picture </li> <li> software download </li> <li>c SS2.0 Practical Manual </li> </ul>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The primary navigation module is complete, you might as well compare the use of tabular layout and CSS in this respect, you will find that the advantages of CSS is obvious.
Note: Start from this section no longer write specific details of the production steps, if you do not understand the part of them, you can leave a message in this section; for the CSS master unskilled friends, suggest to review the previous sections, usually more with Dreamweaver do some examples, slowly will gradually grasp.
