CSS Web Page Layout Introduction Tutorial 12: Vertical Navigation Menu_Basic Tutorial

Vertical navigation menu is also an important form in website applications. The so-called vertical navigation menu refers to a form of navigation arranged from top to bottom placed on the left or right side of the web page. Let’s take a look at the effect first!

如图所示的效果，我们先看一下代码结构：

    

CSS

        

css入门

        

css进阶

        

css高级

    

webUI

        

理论知识

        

实战应用

        

高级技巧

    

DOM

        

DOM入门

        

DOM应用

        

DOM与浏览器

    

XHTML

        

参考手册

        

交流论坛

　　从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。
　　这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题，h2来做二级分类下面的细节内容。在XHTML的讲法意义中，h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义，直接使用h1,h2来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计：

#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; 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;}

　　本css代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。
　　大家可能已经注意到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h1的样式里设置了上部的上像素？这是为什么呢？因为h1的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，结果显示出来就是两像素的高度了。
　　好了，完整的效果可以预览一下：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Vertical 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; 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;} </style> <div id="nav"> <h1 id="CSS">CSS</h1> <h2 id="a-href-Getting-started-with-css-a"><a href="#">Getting started with css</a></h2> <h2 id="a-href-css-advanced-a"><a href="#">css advanced</a></h2> <h2 id="a-href-css-advanced-a"><a href="#">css advanced</a></h2> <h1 id="webUI">webUI</h1> <h2 id="a-href-Theoretical-knowledge-a"><a href="#">Theoretical knowledge</a></h2> <h2 id="a-href-Practical-application-a"><a href="#">Practical application</a></h2> <h2 id="a-href-Advanced-Tips-a"><a href="#">Advanced Tips</a></h2> <h1 id="DOM">DOM</h1> <h2 id="a-href-Getting-started-with-DOM-a"><a href="#">Getting started with DOM</a></h2> <h2 id="a-href-DOM-application-a"><a href="#">DOM application</a></h2> <h2 id="a-href-DOM-and-browser-a"><a href="#">DOM and browser</a></h2> <h1 id="XHTML">XHTML</h1> <h2 id="a-href-Reference-Manual-a"><a href="#">Reference Manual</a></h2> <h2 id="a-href-Communication-Forum-a"><a href="#">Communication Forum</a></h2> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]