结合CSS和Javascript技术实现动态选项卡菜单

第29卷 第2期

湖北广播电视大学学报 Vol.29, No.2

2009年2月 Journal of HuBei TV University February. 2009, 155～156

结合CSS和Javascript技术实现动态选项卡菜单

熊 迪

（湖北广播电视大学，湖北 武汉 430073）

[内容提要] CSS和Javascritp技术的组合可以设计出许多个性化的网页动态效果，而且它们规范、简洁、易于维护，已经广泛应用于网页的设计开发当中。本文介绍了通过CSS和Javascritp结合的方法如何设计制作网页中的选项卡菜单。

[关键词] CSS；Javascript；网页特效

[中图分类号] TP393 [文献标识码] A [文章编号] 1008-7427（2009）02-0155-02

在互联网时代，网站的设计与开发除了要注重功能性以外，也要关注网站的外观效果。从整体的布局到细节上的特效，都影响到网站的设计好坏，也在一定意义上体现了网站设计团队的技术水平。网站设计涵盖到许多技术，其中CSS作为一种强大的设计语言，几乎应用于每一个网站设计中；而script脚本语言又为DHTML动态网页的设计提供了有力的支持。许多网页的效果都可以通过这两种技术结合使用来实现。本文就结合CSS和Javascript技术来实现动态选项卡式的菜单效果。

网站中我们见到过许多样式的菜单，它们主要起到分类、导航的作用。初期的网站制作中习惯使用静态的链接和表格形式制作此项功能，随着Flash和script语言的兴起，带有各种效果和创意的个性化菜单开始大行其道。它们美观、简洁，风格多样且易于移植。CSS的出现，又使得网页的样式与内容相对分离，设计起来更加规范化、条理化。CSS就像一个“样式数据库”，网页需要用到的所有样式都存放在CSS文件中，使用时通过对应的classname或是相应的元素名就能提取，简化了繁琐的代码，更便于日后的维护。

选项卡菜单的功能是通过选项卡的切换，内容区动态地显示对应于标题的数据，并且通过样式表的变化凸显出当前的标题栏。设计实现由三个部分组成：框架设计、CSS设计和Javascript设计。

一、 框架设计

结构分为上下两层，上面是标题选项卡，下面是内容区。两层重叠在一起，重叠部分的标题区在前，内容区在后，标题区的样式覆盖内容区。标题区设计为横向的无编号列表栏，鼠标指示到具体标题栏时，鼠标形状呈“手型”且当前标题与内容区融合成整体；内容区设计成独立的块结构，根据标题区的选择自动调节显示哪一个块，块中的内容可以是静态的文本、文章列表或数据库数据等。依此设计，DIV结构可以设计为：

Container容器

|--上层标题

|--列表--|--列表1

|--列表2

|--列表3

|--列表4

|--下层内容

|--列表--|--列表1

|--列表--|--列表2

|--列表--|--列表3

|--列表--|--列表4

[收稿日期]2008-10-03

代码实现过程中，通过class=“样式名”和onmouseover=“Javascript函数名”的方式分别调用CSS和Javascript的内容。

二、 CSS设计

首先通过width和height属性定义各元素的长和高；通过position和top、left、right、magin、padding属性定义各区域的相对位置；通过text-align属性定义文本的对齐方式，由此描述整个菜单的“轮廓”。然后通过增大z-index的值和设置margin-top为-1来确定上下两层（标题层和内容层）在z轴上的前后关系以及边线的重叠；通过overflow：hidden来规定内容宽度超出区域的范围时自动切除多余的内容；通过float:left使列表项目的排列方式由原来的上下纵向排列变为设计需要的左右横向排列；通过cursor：pointer改变鼠标形状为“手型”。最后通过在li．Hover伪类中定义上、下、左、右边框的样式使选项卡在鼠标放上去的时候边框与下层内容的边框自然融合在一起，并且分别定义ul元素默认情况的显示属性：none和附加“block”类后的显示属性：block，以此来配合Javascritp函数分情况选择性的分别调用。

156

湖北广播电视大学学报 第2期

三、 Javascript设计

定义Javascript函数是整个设计的核心部分，整个效果如何实现就靠函数来调度。函数的整个思想是：将选项卡编号作为整型参数传递给函数，定义两个数组menu[ ]和content[ ]分别代表标题层和内容层。通过文档对象的getElementById方法得到容器对象，然后通过getElementsByTagName方法得到容器对象内的元素，并将它们赋值给menu[ ]和content[ ]数组。通过遍历数组，将所需要设置的选项卡样式对应到CSS中的li．Hover，将选项卡对应的内容区样式对应到“显示块”—block，其余的对应到“隐藏”—none。

function select(n){

var

menu=mentById("menu").getElementsByTagName("li");

var

content=mentById("content").getElementsByTagName("ul");

for(i=0;i<;i++){

menu[i].className=i==n?"hover":"";

content[i].y=i==n?"block":"none";

}

}

最后便可得到我们所需要的动态菜单效果了。

整体效果如图：

#tabs{ //定义菜单整体格式

text-align:left;

width:400px;

}

.menubox{ //定义标题区的格式

height:22px;

width:400px;

text-align:left;

position:relative; //父容器的属性设置为相对

overflow:hidden; //溢出属性定义当元素内容溢出其区域时内容会被修剪

}

#menu{

position:absolute; //子容器位置属性定义为绝对，使坐标定位于上级区域内

top:0;

left:0;

z-index:1; //定义元素的堆叠顺序

}

#menu li{

float:left; //使列表横向排列

display:block;

cursor:pointer; //定义鼠标的光标形状

width:72px;

text-align:center;

line-height:21px;

height:21px;

}

#menu { //定义鼠标放上时调用的样式

background:#fff;

border-left:1px solid #333;

border-top:1px solid #333;

border-right:1px solid #333; //使下边框为无

}

.contentbox{ //定义内容区格式

clear:both; //定义元素两侧不允许有浮动元素

margin-top:-1px; //定义上下层重叠

border:1px solid #333; //将边框样式和上层标题区样式相同，使其像一个整体边框

height:181px;

width:400px;

}

.content{

clear:both;

padding:8px;

text-align:center;

}

#content ul{ //根据函数调用设置不同的属性

display: none; //隐藏且不独占区域空间

}

#content {

display: block; //显示区域

}

CSS和Javascritp技术的组合可以设计出许多个性化的动态效果，而且它们规范、简洁、易于维护，已经广泛应用于网页的设计开发当中。动态选项卡菜单这样的设计除了可以用本文的方法实现以外，还可以通过很多不同的技术实现，比如Flash、Firework、AJAX等，大家可以结合自己所熟悉的方法对它进行改进和再创造，让更多的网页加上个性化的效果。

[参考文献]

[1] 吴以欣，陈小宁. Javascript脚本程序设计，人民邮电出版社，2005，5.

[2] McFarland，D.S.，CSS实战手册，电子工业出版社，2007，9

[3] 扎卡斯，JavaScript 高级程序设计，人民邮电出版社，2006，11

Realization of dynamic Tabbed menu by CSS and JavaScript

XIONG Di

[Abstract] By using CSS and JavaScript , we can design a lot of diffent web effects. they are norm、succinct

and easy to maintain,so the technology has been used in web site development very paper will

introduce how to design and realize the Tabbed menu on website by CSS and JavaScript.

[Key words] CSS；JavaScript；Web Effects