CSS webpage layout tutorial 12: vertical navigation menu

Source: Internet
Author: User

Vertical navigation menus are also an important form of web applications. Vertical navigation menus are arranged from top to bottom on the left or right of a Web page. Let's take a look at the results first!

For more information, seeCodeStructure:

From the above, we can see that the horizontal code of the XHTML part is slightly different this time. We didn't continue to use UL and Li tags. In fact, we can continue to use ul elements to implement the vertical navigation system in good condition, however, in this scenic spot, we hope to provide different ways to show the flexibility and convenience of CSS design, so as to facilitate the discussion and develop more design ideas.
This time, the format of Div + H1 + H2 is used. The DIV label is used to set the structure area of a navigation bar. In this area, we use H1 as the title of the second-level classification, and H2 as the details under the second-level classification. In the syntax of XHTML, labels H1, H2, and H3 are used to classify texts in a hierarchical manner. H1 and H2 are used to represent hierarchical relationships directly, it is simpler and more intuitive to add ID or class to the tag for hierarchical marking. It is no longer appropriate to use H1 and H2 to mark different levels of classification names. Let's take a look at the CSS code design:

# Nav {width: 100px; border-color: # c5c6c4; border-style: solid; border-width: 0px 1px 1px ;}
# Nav H1 {margin: 0px; padding: 4px; font-size: 12px; font-weight: bold; font-family: verdana; border-top: 1px solid # c5c6c4; background-color: # cccccc ;}
# Nav H2 {margin: 0px; padding: 4px; font-size: 12px; font-family: verdana; font-weight: normal ;}
# Nav H2 A {color: #666666; text-Decoration: none ;}
# Nav H2 A: hover {color: #999999; text-Decoration: underline ;}

This CSS code is simplified. If you cannot understand the meaning of a style sheet, you can select and edit the style sheet in Dreamweaver to check which style sheet you want to edit, you can fully understand the code, which means you are a step closer to the experts.
You may have noticed that # in this example, only the left and right sides and one pixel are set for the nav border, but not the top, and the top pixel is set for the H1 style? Why? Because there is a horizontal line at the top of the H1 style, if there is another horizontal line at the top of the nav, the two lines will grow, and the result shows that the height is two pixels.
Now, you can preview the complete effect:Xmlns = "http://www.w3.org/1999/xhtml">


Csscss getting started CSS advanced webui theoretical knowledge practical application Advanced Skills Domdom getting started Dom application Dom and browser XHTML reference manual discussion forum

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.