CSS webpage layout tutorial 9: Design website navigation with CSS-horizontal navigation

As the most important element of a website, website navigation is the most direct and convenient tool for users to access website content. Website navigation consists of horizontal navigation, vertical navigation, drop-down, and multi-level menu navigation.
As a portal website design, horizontal navigation is generally used for the main navigation. Because there are many texts at the bottom of the portal, and each channel has a different style, it is the best choice to design a unified style in a fixed area on the top without occupying too much space for navigation, most portals in China adopt this form.
Currently, vertical navigation is no longer popular in the design of portal websites. Vertical navigation tends to express product categories.
Drop-down navigation is mainly used for websites with complex functions. It is also common on some websites.

In general, the core goal of navigation is to design a simple and quick operation portal to help users quickly reach the corresponding content on the website. The design should be based on the needs of the website type and content to design a reasonable navigation form. Here we will use CSS to design the three commonly used navigation forms to see how CSS implements these styles.

Horizontal navigation

There is a big difference between creating navigation by using CSS layout and table layout. In addition to page layout, the most important part of a website is navigation, in this step, we should first create a simple and bright navigation system, and then complete the final navigation with the design effect step by step. Here we first come up with a preliminary design style on the top. navigation is a form of horizontal navigation. Before starting CSS navigation, let's first think about the traditional table-style navigation. If the table is just implemented in the form of navigation, You need to design a table. Currently, navigation consists of seven columns. You need to design a table with one row and seven columns, and insert the navigation text in each unit <TD> </TD> label, then let the text of each cell be centered. Let's take a look at the implementation.Code:

Program code --- [www. aa25.cn]

homepage

Div + CSS tutorial

Common Code

crystal icon

slides

Software Download

css2.0 practical manual

The Code shows that the width and height of the table are set, and the border margin is set to 0 to hide the table line, and the text alignment of the cell is centered, A simple navigation is implemented. The key point here is to design a data table similar to the navigation form to associate the navigation with each grid of data. Let's take a look at how to use CSS to design the same navigation system.
The core of Div + CSS layout is to achieve the separation of performance and content. First, let's take a look at the coding methods of the content section:

Program code --- [www. aa25.cn]
<Ul id = "nav">
<Li> <a href = "http: //: www.aa25.cn/index.asp"> homepage </a> </LI>
<Li> <a href = "http: //: www.aa25.cn/sort/list_4.html"> Div + CSS tutorial </a> </LI>
<Li> <a href = "http: //: www.aa25.cn/sort/list_5.html"> Common Code </a> </LI>
<Li> <a href = "http: //: www.aa25.cn/sort/list_6.html"> crystal icon </a> </LI>
<Li> <a href = "http: //: www.aa25.cn/sort/list_7.html"> slides </a> </LI>
<Li> <a href = "http: //: www.aa25.cn/sort/list_10.html"> Software Download </a> </LI>
<Li> <a href = "http: //: www.aa25.cn/css2/"> css2.0 practical manual </a> </LI>
</Ul>

This Code uses a new element ul. Before navigation, let's take a brief look at the UL element. Ul is a widely used element in CSS. It is mainly used to describe the list content. Each <ul> </ul> indicates that the content is a list block, <li> </LI> is used to describe each piece of List data in the block. You can see the Display Effect of UL without any style.

As a list-type content, UL's default style displays the dot serial number, which is arranged from top to bottom by default. Why do our navigation systems use ul elements? In fact, navigation is also a kind of list, which can be understood as a navigation list. Each list data is a navigation channel in the navigation. You can also use a layer-2 nested Div to implement a navigation code structure, however, compared with the UL list, div is too complex. UL should focus on block-type areas, while ul is more lightweight and flexible for simple text navigation.
In the code, we also define an id named nav for UL, and then write code for this UL and its objects to implement the desired navigation effect.

Write the first style to the Li object under ul. We hope that each list item in the list will not follow its default arrangement from top to bottom, therefore, the attribute of foat: Left is specified for # nav Li, just like the foat: Left of Div, which also floats itself to the left Based on the floating positioning principle, so that the next object is attached to the right of the object, and eventually all Li has a left floating me, thus forming a horizontal arrangement.
The key to navigation is the style control of the link object. Here we use # nav Li a {} to write a style for each a link object under Li:
Display: block is the focus here. It changes the display mode of a link object from a text segment to a block object. It has the same features as IDV. By default, div is a block object, A linked object is a common text by default, so there is no way for a linked object to act like a box button, after using display: block, A link object can become a block object like a div and other elements. You can add a series of styles to the link tag by using attributes such as CSS margin and padding.
Through the application of display: block, we make the Tag Element have width: 97px, height: 22px, and use margin-left: 2px between each; format: The left margin is 2px.
The display attribute is an attribute in CSS for object display mode operations. It mainly uses a special article to change the display mode of objects. In CSS, all objects have their own default display mode, objects such as A and span are default inline objects in midday periods. They do not affect the display of any other objects. For example, after applying span, the content after span is automatically placed on the right of span, like a piece of text. By default, objects such as Div are displayed as block submachines, which occupy a row of space by default, as a square is displayed on the page, A is converted into a block object through display: block. In addition, there are many ways to use the display function. <textarea id="runcode58918"><Br/> <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> homepage </LI> <li> Div + CSS tutorial </LI> <li> Common Code </LI> <li> crystal icons </LI> <li> slides </LI> <li> Software Download </LI> <li> css2.0 utility manual </LI> </ul> <p></textarea>
[Ctrl + A select all Note: If you need to introduce external JS, You need to refresh it to execute]

preview the effect. It looks like a navigation, but there is no response when you move the mouse up, which is unfriendly to the user experience, therefore, You Need To prompt that the user object can be clicked through some operations with interactive feedback:
# nav Li A: hover {background-color: # bbbbbb; color: # ffffff ;}< br> In this preview, move the mouse over a channel and the response is displayed, so our navigation has become more friendly. <br/> <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> homepage </LI> <li> Div + CSS tutorial </LI> <li> Common Code </LI> <li> crystal icons </LI> <li> slides </LI> <li> Software Download </LI> <li> css2.0 utility manual </LI> </ul> <p>
[Ctrl + A select all Note: To introduce external JS, refresh it before execution]

the preliminary navigation module is complete. Compare the advantages and disadvantages of table layout and CSS. You will find that the advantages of CSS are obvious.
Note: no detailed production steps will be written from the beginning of this section. If you do not understand some of them, you can leave a message in this section. If you are not familiar with CSS, we recommend that you review the previous sections and use Dreamweaver for some examples to gradually master them.