基于CSS＋JavaScript的网页下拉菜单的设计与研究.pdfVIP

第32卷第2期 苏 州 大 学 学 报 (工 科 版) V01．32 No．2 2012年4月 JOURNALOFSOOCHOW UNIVERSITY(ENGINEERINGSCIENCEEDITION) Apr．2012 文章编号：1673—047X(2012)一02—0061—06 基于 CSS+JavaScript的网页下拉菜单的设计与研究 张红琴，杨省伟 (河南质量工程职业学院，河南 平顶山467001) 摘 要：网页的导航菜单是整个网页布局中最重要的部分之一，用CSS样式和脚本语言JavaScript 制作网页二级下拉菜单，可以使 内容和样式分离，修改页面 内容或样式时，更加容易省时。只改变 CSS属性，其他 内容都不变，就可以轻松实现子菜单横向排列和竖直排列的转换，可广泛用于网页设 计 中。 关键词：CSS；DIV；JavaScfipt；网页；XHTML；菜单 中图分类号：TP311 文献标识码 ：A 0 引 言 css(CascadingStyleSheets)中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内 容分离的一种标记性语言 j，它的作用是定义网页的外观(例如字体、颜色、位置等)。DIV元素用来为XHT． ML文档内大块(block-leve1)的内容提供结构和背景的元素。CSS+DIV是一种网页的布局方法，过去布局页 面基本上都使用TaJ)le，而现在因为XHTML主要用 DIV标签进行网页布局，所以叫DIV+CSS。在 (x)HTML 中不只用DIV标签，实际上还要有其他很多标签和DIV结合在一起使用。合理的Web标准页面结构加上合 理的标签使用，才会让站点的重要 内容更容易被搜索到。Web标准的XHTML一个很重要的原则是，使用合 适的标签组成页面结构。合适的标签指标签有语义、条理清晰、可读性好。所以，页面大块区域的布局一般使 用DIV元素，但在某些区域可以考虑使用其他元素 J。在开发 CSS的时候，语义化被越来越多的提及，语义 化归根到底其实还是代码的可读性问题。语义化就是让代码更易读、易懂，全部使用DIV的页面是做不到这 一 点的。所以DIV+CSS实际上就是XHTML+CSS，它是Web标准中常用术语之一。XHTML与CSS的关系 就是 “内容”与 “形式”的关系，由XHTML确定网页的内容，而通过 CSS来确定页面的表现形式 ，只要简单 地修改几个CSS文件就可以重新设计整个网站的页面。现在YAHOO、MSN等国际门户网站，网易、新浪等国 内门户网站，以及主流的Web2．0网站，均采用 DIV+CSS的框架模式，更加印证了DIV+CS9是大势所趋。 JavaSeript是因特网上最流行的脚本语言，常用来给XHTML网页添加动态功能，比如响应用户的各种操作。 随着计算机网络技术的迅猛发展，Intemet即国际计算机互联网成为全球最大的信息资源系统，计算机网 络正以迅猛的速度进入社会的各个角落并已成为2l世纪经济发展的重要推动力。因特网成为人们快速获 取、发布和传递信息的重要渠道，在 Internet上发布信息主要是通过网站来实现的，网页作为网站呈现给用户 的界面是整个网站必不可少的一部分，而网页的导航菜单是整个网页布局中最重要的部分之一。导航菜单的 种类很多，二级下拉菜单是其中的一种 (通常网页中只显示一级菜单)。鼠标放在主菜单上出现相应的子菜 单，可以在子菜单上点击进入相关的页面，当鼠标离开主菜单或子菜单时子菜单消失。制作二级下拉菜单的 方法有很多种，下面论述如何用CSS+DIV+JavaScript制作网页二级下拉菜单，并且实现第二级子菜单由竖 直排列转换成水平排列。 收稿 日期：2011—12—30 作者简介：张红琴(1969一)，女，讲师，主要研究方向为计算机应用和计算机网络。 62 苏州大学学报 (工科版) 第32卷 1 基本原理 用XHTML中的DIV标签设置主菜单和子菜单区域，也就是设置页面元素，确定页面中的内容；用 CSS设 置元素的CSS属性，对其进行定位并设置其是否可见；再用JavaScript编写函数，动态改变元素的CSS属性。 实现当鼠标移