网页导航栏制作：如何为网页添加导航栏_IT百科

制作一个放导航栏的容器

制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜

色为灰色，相关代码如下：

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

显示结果

在浏览器中显示的结果为下图所示：

在容器中放入一些导航栏

导航栏代码如下:

<ul>

<li>模块三</li>扮纯

<li>模块五</li>厅毁咐

</ul>

为导航栏添加一些属性

#nav

{

width:1000px

height:30px

background:#CCC

margin:0 auto

margin-top:50px

}

#nav ul

{

width:960px

height:35px

}

#nav ul li

{

float:left

width:100px

float:left

list-style:none

background:yellow

line-height:35px

}

</style>

导航栏在浏览器页面的显示结果如下图所示：

导航条制作方法如下：

移动光标到需要导航条的地方，单击主菜单栏的“Insert\Navigation Bar”子命令，或直接单击Objects面板上的图标，d出“Insert Navigation Bar”对话框，此时我们可以进行各种设置来实现上述功能：

在“Element Name”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Image”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：Element Name项和 Up Image项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置大饥超级链接的目标。

接着是“Options”项，若选中“Preload Images”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over While Down Image项改为鼠标移动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图像，Over image项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。

　桐羡　最下面是“ Insert”项，选框中有Horizontally(水平)和Vertically(垂直)两个选项。选中Horizontally为导航条水平展开，选中Vertically 为导航条垂直展开。 Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。

当一个部位设置完成后，要添加其他部位，可点击对话框上方的“+”按钮，可按上面的步骤进行新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“-”按钮即可。

另外，使用设置导航条图像中的高级功能,可改变文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时,可用导航条中的高级功能:在“Behaviors”面板中的“Actions”标签页,单击其上面的“+”号按钮,在d出的菜单中选择“Set Nav Bar Image”命令,d出Set Nav Bar Image 对话框中,选择“Advanced”标签页,对高级属性进行设置。其中,若选择“Over Image or over while Down Image”项,则当鼠标划过图片时显示其上面的图片,有上浮或是下沉局仿拍的效果,并在“Also Set Image”文本框中选择要显示的图片,同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片路径；若选择“Down Image”项,则当浏览者单击所选图像后,显示另外的图片。

存盘后，按F12键测试所作导航条。

导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。

1、打开Dreamweaver创建新页面，输入以下代码。如图：

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"饥简

<html xmlns="

<head>

<script src="

<title>css菜单演示</title>

<!--

*{margin:0padding:0border:0}

body {

font-family: arial, 宋体, serif

font-size:12px

}

#nav {

line-height: 24px list-style-type: none background:#666

}

#nav a {

display: block width: 80px text-align:center

}

#nav a:link {

color:#666 text-decoration:none

}

#nav a:visited {

color:#666text-decoration:none

}

#nav a:hover {

color:#FFFtext-decoration:nonefont-weight:bold

}

#nav li {

float: left width: 80px background:#CCC

}

#nav li a:hover{

}

#nav li a.on{ background:#999}

#nav li ul {

line-height: 27px list-style-type: nonetext-align:left

left: 烂中裤-999em width: 180px position: absolute

}

#nav li ul li{

float: left width: 180px

background: #F6F6F6

}

#nav li ul a{

display: block width: 180pxw\idth: 156pxtext-align:leftpadding-left:24px

}

#nav li ul a:link {

color:#666 text-decoration:none

}

#nav li ul a:visited {

color:#666text-decoration:none

}

#nav li ul a:hover {

color:#F3F3F3text-decoration:nonefont-weight:normal

background:#C00

}

#nav li:hover ul {

left: auto

}

#nav li.sfhover ul 培凯{

left: auto

}

#content {

clear: left

}

-->

</style>

$(function(){

$("#nav li").hover(function(){

$(this).children("a").toggleClass("on")

})

function menuFix() {

var sfEls = document.getElementById("nav").getElementsByTagName("li")

for (var i=0 i<sfEls.length i++) {

sfEls[i].onmouseover=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseDown=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onMouseUp=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover"

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"")

}

window.onload=menuFix

//--><!]]></script>

</head>

<body>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<li><a href="#">百度芝麻酱</a>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<li><a href="#">演示演示演示</a></li>

<li><a href="#">演示演示演示</a></li>

<li><a href="#">演示演示演示演示演示</a></li>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

2、点击F12预览导航效果。如图：

注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11977569.html

网页导航栏制作：如何为网页添加导航栏

发表评论

评论列表（0条）