The vertical navigation menu is also an important form of web application, and the so-called vertical navigation menu refers to a navigation form arranged from top to bottom on the left or right side of the page. Let's look at the effect first!
Effect, let's look at the code structure first:
Css
Getting Started with CSS
CSS Advanced
CSS Advanced
WebUI
Theoretical knowledge
Actual application
Advanced Techniques
Dom
Getting Started with Dom
Dom App
Dom and browser
Xhtml
Reference Manuals
Exchange Forum
From the above can be seen, the XHTML part of the code horizontal code slightly different, we do not continue to use the UL and Li tags, in fact, continue to use UL elements can also be intact to achieve vertical navigation system, But in this scenic spot we hope to provide more different ways to show the CSS design flexibility and convenience to facilitate the development of more design ideas.
This time, the form of DIV+H1+H2 is used. We use div tags to set a navigation structure area. In this area we used the H1 to be the title of Class two classification, H2 to do the details below the level two classification. In the meaning of XHTML, h1,h2,h3 these tags have their own meanings for hierarchical partitioning of text, using H1,H2 directly to represent hierarchical relationships, and it is easier and more intuitive to use H1 in this way, rather than adding an ID or class to a tag to make a level tag. H2 to mark different levels of classification names is just as appropriate. Let's take a 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 part of the simplified wording, if not understand the meaning, you can open the selection in Dreamweaver to edit the style sheet to see the specific item, I believe that after such a few exercises, the code you have been able to fully understand, that you are a step closer to the master.
As you may have noticed, #nav的边框本例中只设置了左右下和一像素, and not on, but in the H1 style set the upper pixel above? 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, it grows two, and the result shows that it is a height of 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> portrait 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; te Xt-decoration:none;} #nav h2 a:hover {color: #999999; text-decoration:underline;} </style> </pead> <body> <p>css& Lt;/h1> <p>css Getting Started </p> <p>css </p> <p>css Advanced </p> &L t;h1>webui</p> <p> Theoretical Knowledge </p> <p> Practical Applications </p> <p> Advanced tips </p> <p>DOM</p> <p>dom Getting Started </p> ; <p>dom apps </p> <p>dom and browsers </p> <p>XHTML</p> <p> reference Manuals </ h2> <p> Exchange Forum </p> </body> </ptml>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
