Design Web site Navigation with CSS: Landscape navigation

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.


horizontal navigation as a portal site design, the main navigation is generally guided by horizontal.  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.


longitudinal navigation is no longer popular in the design of portal site, vertical navigation is more inclined 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 the needs of the content of the design of a reasonable navigation form.  Here we will use CSS to design the three common navigation forms, and see how CSS implements these styles.





Transverse navigation





use the form of CSS layout to make 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 completion 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 > Home </a></td>


<td align= "center" ><a >div+css Tutorials </a></td>


<td align= "center" ><a > Common Code </a></td>


<td align= "center" ><a > Crystal icon </a></td>


<td align= "center" ><a > Slide pictures </a></td>


<td align= "center" ><a > Software downloads </a></td>


<td align= "center" ><a >css2.0 Practical manual </a></td>


</tr>


</table>


</body>





through the code can be seen, 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.


div+css layout of the core is to achieve the performance and content separation, first to understand the content of the code to write the way:





Program Code---[WWW.AA25.CN]


<ul id= "NAV" >


<li><a > Home </a></li>


<li><a >div+css Tutorials </a></li>


<li><a > Common Code </a></li>


<li><a > Crystal icon </a></li>


<li><a > Slide picture </a></li>


<li><a > software download </a></li>


<li><a >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, next 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 list item no longer follow its default from top to bottom arrangement, so give #nav li specified foat:left attributes, like Div foat:left;  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 #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 tag element have a width width:97px, a height of height:22px, and use margin-left:2px between each A, in the form of the outer margin of 2px on the left.


Display property is a CSS in the object display mode operation of a property, 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, When displayed, they do not affect the display of any other object, such as when 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 single line of space by default. And as a square displayed in the page, through the 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.





Preview the effect, has been like a navigation, but the mouse moved up without any response, so for the user experience is very unfriendly, so you need to use some interactive feedback 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.





Primary navigation module 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.