基于CSS创建导航菜单研究

邹寿春

（闽西职业技术学院 计算机系，福建 龙岩 364021）

基于CSS创建导航菜单研究

邹寿春

（闽西职业技术学院 计算机系，福建 龙岩 364021）

导航菜单是网站中常见而重要的元素，为浏览者浏览网页提供方便。首先简单分析别的创建导航菜单方法的不足，接着研究核心技术，得出基于CSS创建导航菜单的方法可行有效，最后以实例展示基于CSS创建导航菜单的过程。实验证明基于CSS创建导航菜单的方法高效、实用。

CSS；导航菜单；网页设计

时下是网络技术高速发展的时代，因特网已盛行于人们生活的方方面面。人们遨游于网络海洋中时，最常碰到的当数各类网站。在一个网站中，常通过导航菜单及别的超级链接实现访问站点内各个独立网页的操作。可以说，导航菜单是网站设计中一块重要组成部分。

常用创建导航菜单的方法主要有：使用JavaScript代码编程实现；使用JQuery实现[1]；使用第三方软件（如Flash等）实现；使用插入Dreamweaver所带“Spry菜单栏”实现。但以上方法存在要么所用代码较多，要么须关联插件，要么样式简单，不易修改等缺陷。针对以上创建导航菜单方法存在的不足，给出一种基于CSS创建导航菜单的方法。

1 核心技术

1.1 CSS简介

CSS（层叠样式表，即Cascading Style Sheets的英文缩写），是W3C组织制定的，用于控制网页内容显示效果的一种标记性语言。CSS由选择器、属性和属性值三部分构成，其语法格式为：

选择器{属性1:属性值1;属性2:属性值2;……}语法格式中，属性必须包含在{}中；属性与属性值之间用英文标点“:”分开；属性之间用英文标点“;”分开。选择器可分为基本型选择器与特殊型选择器两大类，基本选择器有标记选择器、类别选择器和ID选择器3种[2]，特殊型选择器主要由基本选择器复合而成，包括组合选择器、群组选择器、后代选择器、子选择器、相邻选择器、属性选择器、伪类选择器、通配符选择器。

1.2 CSS引用方式

CSS使用非常灵活。根据它被引用的位置，可分为内部样式表与外部样式表两大类。内部样式表包含行内式、内嵌式两种情况，直接作用于网页文档；外部样式表可被站点内多个网页文档重复引用，采用链接方式或导入方式作用于网页文档。外部样式表经常用于定义整个站点的整体风格，对后期维护带来方便，提高效率，所以使用较多。

各引用方式格式举例如下：

◆行内式（直接作为标签style属性值），例：〈p style="color:#FF00FF; font-weight:bold;…"〉

◆内嵌式（定义在网页文档头部〈style〉与〈/style〉标签内），例：

〈style type="text/css"〉

#top1{font-weight:bold;…}

〈/Style〉

◆链接式（在网页文档头部链接外部样式文件），例： 〈link href="外部样式表文件名.css" rel="stylesheet" type="text/css"〉 /*href的属性值为外部样式表文件相对路径*/

◆导入式（在网页文档头部〈style〉与〈/style〉标签内导入外部样式文件），例：

〈style type="text/css"〉

〈!--

@import url(“外部样式表文件名.css”); /*url后括号内注明外部样式表文件相对路径*/

--〉

〈/style〉

1.3 CSS盒子模型

盒子模型是CSS的基石之一，布局最重要的概念，它指定元素如何呈现在页面当中。盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子内可再嵌套盒子，然后对每个盒子进行定位。CSS定位通过position属性的值实现，属性值有：static、 relative、absolute 、fixed。但这种定位方式，盒子并未脱离文档流的控制，排列仍受很大限制。为了灵活定位盒子，可设置盒子float属性，实现盒子浮动，使盒子脱离文档流灵活布局。float属性值有：none、left、right 3种，其中none表示不浮动；left（或right）表示向其父元素的左（或右）侧靠紧。当浮动出现错位时，可以设置clear属性清除。清除浮动既能够解决页面错位的问题，又能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。

关于盒子显示及隐藏，可通过设置display属性值实现。display属性决定将元素显示为块元素、内联元素、列表项目或其他类型的元素[3]。display属性值有多种，最常用的有：block、inline、none。值block表示此元素将显示为块级元素，此元素前后会带有换行符；inline为默认值，表示此元素会被显示为内联元素，元素前后没有换行符；none表示此元素不会被显示。

1.4 CSS优势

CSS具有许多优点：语法简单，便于编写；代码简洁，提高网页浏览速度；结构清晰，易于搜索；采用盒子模型，利于网页结构布局；独立CSS文档，方便网站修改维护。由于CSS从真正意义上实现了网页内容与它的外观相分离[4]，其正被广大网页设计者所青睐。

2 导航菜单设计步骤

导航菜单是一种重要的超级链接，在网站中起到非常重要的作用，为浏览者在网站中快速浏览各类重要内容提供方便。根据导航菜单放置位置划分可分为横排导航菜单和竖排导航菜单[5]，可按页面的总体布局要求设置不同排列方式的导航菜单。导航菜单设计一般有创建、设置、美化三个步骤，以下为菜单设计流程：

图1 设计流程图

3 导航菜单的实现

导航菜单放置形式多样，但所涉及核心技术都相似，只要稍加修改，即可实现相应效果。在这以闽西职业技术学院计算机系（http://www.mxdx.net/jsj/）主页导航菜单为例，展示其设计与实现过程。

图2 网站部分布局效果

在此页面中，根据布局安排，最上面一栏为Banner栏，放置系logo等；紧接一栏为导航菜单栏，共两级菜单：一级菜单为横排导航菜单，二级菜单采用竖排放置形式；后面区域为网页所要宣传的内容。在设计导航菜单时，首先应设置好菜单栏目内容，确定菜单级别、菜单排列形式等，即导航菜单结构。以下为部分导航菜单结构图（如图2所示）及导航菜单设计流程图（如图3所示）。

图3 导航菜单结构图

3.1 创建导航菜单

创建导航菜单的方法可以分为普通的超链接导航菜单和使用列表标签构建的导航菜单[6]。普通的超链接导航菜单比较简单，仅对文本添加相应链接，实现的效果比较单一；使用列表标签构建的导航菜单，定义方便灵活，能实现美观的效果，进而起美化网页作用。

此处使用列表标签创建导航菜单，首先创建基于〈ul〉无序列表菜单，用〈li〉标签列出一级菜单项；对于有二级子菜单的菜单，可在〈li〉与〈/li〉内嵌套〈ul〉无序列表，用〈li〉标签列出二级子菜单项。用这种方法，对于有三级子菜单的创建一样适用。以下为创建导航的部分源代码：

3.2 设置导航菜单

导航菜单一般效果为当鼠标移至父菜单时，能自动弹出子菜单，这就涉及定位、显示及隐藏等问题。通过定义各个盒子样式可实现，主要选择器类型有：ID选择器、群组选择器、后代选择器、伪类选择器。把这些定义的样式集中在sty.css外部样式文件中，采用链接方式引用到网页文档头部，其链接代码为〈link href="css/sty.css" rel="stylesheet" type="text/css" /〉。以下给出定义的样式及部分说明：

3.3 美化导航菜单

为了使导航菜单与众不同，增加网页的生动活泼性，达到美化网页的效果，可为其适当加上效果，如当鼠标移到相关菜单项时，相关菜单底色变化、或字体变大、或凸出显示等，这些效果可以通过设置相关属性值实现。当然，在美化导航菜单时，并不是特效越多越好，应该把握尺度，尽量做到生动但不花哨。在此仅以添加改变字体颜色效果为例，作简单说明，实现代码为#menu li a:hover{color: #0000CC;}。

图4 设置前菜单效果

图5 设置后菜单效果

4 结语

通过实践证明，本文所提出的基于CSS创建导航菜单的方法是可行的，此方法思路清晰，代码简洁，适用性强。灵活运用CSS特性，掌握CSS使用技巧，可创建出形式多样、适合各种风格的导航菜单。CSS不仅在创建菜单方向，而且在布局网页、美化网页等方面都有突出表现。由于CSS（层叠样式表）语法简单、功能强大，增强了控制页面外观的能力，所以越来越被网页设计者所采用。随着CSS技术为大家熟悉并大量使用，CSS必将成为网页设计利器。

［1］王燕妮.下拉菜单的实现方法及比较［J］].电脑编程技巧与维护，2014(24)：20-21.

［2］温谦.CSS网页设计标准教程［M］].人民邮电出版社，2012.

［3］Hakon Wium Lie.Cascading Style Sheets:Designing for the Web Third Edition［M］.祁玉芹，译.清华大学出版社，2009.

［4］刘海霞. DIV_CSS网页布局技巧研究［J］].计算机时代，2015(3)：14-17.

［5］邹欣.DIV+CSS商业案例与网页布局开发精讲［M］.中国铁道出版社，2010.

［6］刘瑞新.网页设计与制作教程HTML+CSS+JavaScript［M］.机械工业出版社，2013.

［责任编辑：罗幼平］

TP311.1

A

1672-1047（2015）04-0109-04

10.3969/j.issn.1672-1047.2015.04.28

2015-07-06

邹寿春，男，福建连城人，讲师，工程硕士。研究方向：图像处理、动漫设计与制作、网站设计。