网页导航菜单栏制作

导航菜单的实现

首先定义导航外围容器的样式：

#left {

width: 178px;

}

现在外围容器我们只要简单的定义其宽度，并赋予left的id名。在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul，通过CSS我们可以改变其外观和形式。HTML结构如下：

< div id="navcontainer">

< ul>

< li>< a href="#">Home< /a>< /li>

< li>< a href="#">About me< /a>< /li>

< li>< a href="#">ximicc< /a>< /li>

< li>< a href="#">Articles< /a>< /li>

< li>< a href="#">Photo roll< /a>< /li>

补充

< /ul>

< /div>

ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。利用CSS可以去掉那些小圆点，并用背景的形式替换以我们制作好的图标：

比如 在放框架的网页中有

navigationFrame这个框架放的是导航菜单

displayFrame这个框架就是导航后要显示内容的地方

ahtml 为导航菜单页面

bhtml为框架displayFrame刚开始显示的页面

<frameset (此处省略一些属性)>

<frame src="ahtml" name="navigationFrame" noresize="noresize" title="导航" />

<frame src="bhtml" name="displayFrame" title="显示" />

</frameset>

然后在ahtml中,对菜单项的链接或按钮使用 onclick="change()",

<script language="JavaScript">

function change()

{

windowopen('destinationhtml','displayFrame');

//其中 destinationhtml是要在name为displayFrame框架中打开的页面,

}

</script>