Site navigation is the most important element of the site, is the most direct and convenient site to provide users with access to the content of the site tools. Site navigation from the form of mainly by horizontal navigation, vertical navigation, drop-down and multi-level menu navigation third form.
Horizontal navigation as the design of the portal site, the main navigation is generally used in landscape orientation. Since the portal site has a lot of text, and each channel has a style to differentiate, so in the top fixed a region design uniform style and do not occupy too much space navigation is the most ideal choice, most of the domestic portals use this form.
Vertical navigation is no longer popular in the design of portal sites, and vertical navigation is more inclined to express product classification.
The drop-down navigation is used primarily for complex web sites. It's also common on some websites.
In general, the core goal of navigation is to design a simple and efficient operation portal, to help users quickly reach the corresponding content of the site, design should be based on the type of site and content needs to design a reasonable form of navigation. Here we will use CSS to design three commonly used navigational forms to see how CSS implements these styles.
Landscape navigation
Using the form of CSS layout to make navigation and table layout is very different, the site in addition to page layout, the most important is the navigation section, in this step should first make a simple and crisp navigation system, and then step by step to complete the final navigation with the design effect. Here we first envision the top of the primary design style, navigation as a form of horizontal navigation. Before beginning the navigation of CSS, let us recall the traditional table-style navigation production. If the table format is implemented in the form of navigation, you need to design a tabular table. Navigation currently has a total of 7 columns, you need to design a 1 rows and 7 columns of the table, and in each cell tab insert navigation text, and then let each cell text center, you can look at the implementation code:
Through the code can see, set the width of the table, and set the border margin to 0 to hide the table line, and then the first cell text alignment is centered, the implementation of simple navigation, here is the main point is to design a data table similar to the navigation, will navigate the data in each grid. Take a look at how CSS can be used to design the same navigation system.
The core of div+css layout is to achieve the separation of performance and content, first to understand the content part of the code writing method:
