Vertical navigation menu is also an important form of Web application, the so-called vertical navigation menu refers to the left or right side of the Web page from top to bottom arrangement of a navigation form. Let's look at the effect first!
As shown in the illustration, let's look at the code structure:
<div id= "NAV" >
</div>
From the above can be seen, the XHTML part of the code horizontal code slightly different, we did not continue to use the UL and Li tags, in fact, continue to use the UL element can also be intact to achieve the vertical navigation system, But in this scenic spot we hope to provide more different ways to show the CSS design flexibility and convenience in order to facilitate the development of more design ideas.
This time, the Div+h1+h2 form is used. We use the DIV tag to set a navigation structure area. In this area we use the H1 to make the title of Class two classification, H2 to do the details below the level two classification. In the h1,h2,h3 of XHTML, the labels themselves have the meaning of hierarchy of text, using H1,H2 to represent hierarchical relationships, which is simpler and more intuitive than adding IDs or classes to tags to make levels of markup, where H1 is used, H2 to mark different levels of the category name is also really suitable. Let's look at the design of the CSS code:
#nav {width:100px; Border-color: #c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}
#nav H1 {margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:verdana; border-top:1px solid #c5c6c4; b Ackground-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 section uses a simplified notation, if the meaning does not understand, you can open in the Dreamweaver choose to edit the style sheet to see what is the specific item, I believe that after such a few exercises, these code you have been able to fully understand, indicating that you from the master and a step closer.
You may have noticed, #nav的边框本例中只设置了左右下和一像素, instead of on, and in the H1 style set the upper pixel? What is this for? Because there is a horizontal line in the upper part of the H1 style, if there is a horizontal line in the upper part of the NAV, two lines grow, and the result shows that the height of the two pixels.
Well, the full effect can be previewed:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> longitudinal navigation menu </title> <style> #nav {width:100px; Border-color: #c5c6c4; border -style:solid; border-width:0px 1px 1px 1px;} #nav H1 {margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:verdana; border-top:1px solid #c5c6c4; b Ackground-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;} </style> </pead> <body> <div id= "nav" > <p>CSS</p> <p>css Introduction & Lt;/h2> <p>css Advanced </p> <p>css </p> <H1>WEBUI≪/h1> <p> Theoretical Knowledge </p> <p> actual application </p> <p> advanced Technique </p> &L T;h1>dom</p> <p>dom Introduction </p> <p>dom application </p> <p>dom and Browser & lt;/h2> <p>XHTML</p> <p> Reference manual </p> <p> Exchange forum </p> </div > </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
