基于JQuery框架的网页导航设计

2022-05-27 17:03:11余军

计算机时代 2022年5期

关键词：网页

摘要：导航栏制作的方法较多，有些网页导航采用HTML5制作导航内容，然后采用CSS3控制样式，这种制作方式结构简单，但层次关系较复杂、代码较多、调试网页时间长。本文介绍了一种简单容易的方法，采用轻量级架构JQuery，利用JQuery写得少、做得多的特点，使用尽可能少的代码，达到尽可能好的效果。采用JQuery技术制作的导航，代码简洁，结构清晰，是一种值得推广的好方法。

关键词： JQuery; 导航栏; 网页; HTML5; CSS3

中图分类号：TP311 文献标识码：A 文章编号：1006-8228（2022）05-70-03

Design of Web navigation based on JQuery framework

Yu Jun

Abstract： There are many methods of making navigation bar. Some Web navigation uses HTML5 to make navigation content， and then uses CSS3 to make the style. The structure of this method is simple， but the hierarchical relationship is complex， the code is large， and the debugging time of the Web page is long. In this paper， a simple and easy method is introduced. Using JQuery， a lightweight architecture with the characteristics of writing less and doing more， the best possible effect is achieved with less code. The navigation made by JQuery framework has concise code and clear structure， which is a good method worth using.

Key words： JQuery; navigation bar; Web page; HTML5; CSS3

引言

在制作网页导航栏的过程中，我们往往发现它是最难设计的部分，样式多，结构复杂，想要设计出一个美观大方且实用的导航栏并非易事。设计静态的网页，我们可以通过HTML5布局其结构，运用CSS3控制其样式，这种做法容易理解，但也带来代码很多的问题，我们希望找到更好的方法实现导航栏的设计。

本文介绍一种运用JQuery实现的方法，JQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法[1-4]。开发JQuery库的目的是—WRITE LESS，DO MORE（写的少，做的多）[5-6]。它可以用最少的代码，完成更多复杂而困难的功能。充分利用JQuery的优势，让具有交互作用的网页导航栏在制作上比使用HTML5+CSS3方法更加简洁、灵活，采用JQuery技术制作方便，结构简单，是一种值得推广使用的网页导航栏制作方法。

1 主流导航栏样式

目前，网页设计的基本结构由五大部分组成：头部，导航栏、缩略图、内容部分、底部。而网站上导航栏的设计基本上已经形成一种格局，横向导航，按功能分块，鼠标悬浮打开，鼠标离开收缩。尽管各个单位网站导航栏样式及风格不同，但功能上却是大同小异。下面我们看看华南某高校网站导航栏的设计效果，分成九个大项，分别是学校概况、机构设置、人才培养、科学研究、招生就业、图书馆、校园生活、人才招聘、合作交流，导航栏效果如图1所示。

总共九个大项组成的导航栏，每个项都可以单独展开，例如“人才培养”栏的下拉效果如图2所示。

2 Html5+CSS3+JQuery导航栏设计方法

制作导航栏一般采用二种方法，第一种是纯使用html5+css3制作导航栏，由于交互部分的制作需要较多的代码，结构复杂，尽量不使用。第二种方法是使用html5+css3进行布局，然后使用Javascript或JQuery进行交互，例如图1某高校导航栏的结构。因为涉及到用户的交互，采用Html5+CSS3+JQuery的方式制作是相对简单的方法，建议使用。我们的做法是分三部分来做，首先建好页面结构，然后布局样式，最后设置交互。可以将每一个大类采用分块方式分类，每一类的内容采用无序列表排列。下列我们先讨论图1导航栏的页面结构和样式表。

2.1 导航栏页面结构

页面结构按照导航的分类进行静态布局，采用列表方式可以实现大类分类，再用大类分小类排列的形式进行，这样的结构较清晰。

<！--导航栏开始-->

<ul>

<！—接上面导航栏开始-->

</ul>

</li>

</li>

<ul>

<li><a href="">本科生教育</a></li>

<li><a href="">研究生教育</a></li>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

<li><a href="">本科生招生</a></li>

<li><a href="">研究生招生</a></li>

<li><a href="">继续教育招生</a></li>

</ul>

</li>

<li id="son6"><a href="">图书馆</a

</li>

<ul>

</ul>

</li>

</li>

<ul>

</ul>

</li>

</div>

<！--导航栏结束-->

2.2 导航栏CSS3样式表结构

样式表负责设置好导航栏的位置及显示的状态，按照类别由大到小进行样式的布局，不是十分复杂，所以，样式表可以建在页面内，也可采用外部样式表用<link>语句进行连接。

<head>

.nav{width：1000px;height：20px;margin： 0 auto;}

ul，li{padding：0;margin：0;list-style：none}

.nav>li{text-align：center;float：left;width：110px;height：35px;

line-height：35px;background：white;border-right：

1px solid white;}

.nav ul{display： block;}

a{text-decoration：none;}

.nav ul{background：#fedabc;display：none}

</style>

</head>

3 JQuery的制作

JQuery主要完成交互动作。在完成页面结构和样式表之后，就可以做每一类的导航栏目的交互设计，完成下拉及收回的设计。基于JQuery技术的导航栏页面每栏内容是不同的，但结构是相同的，用户将鼠标悬浮后展开，鼠标离开导航栏收回。由于每个单项的展开代码写法相同，所以，可以采用单个类设置好它的交互，然后复制到其他项，只改变它的对象即可，例如，设置好“学校概况”大项的交互之后，就可将过程复制到“人才培养”等大项当中。做法是首先导入JQuery小程序，然后对每个大项进行展开。每个单栏的展开仅用一个函数的二个事件就可以完成，一个采用的是mouseenter（）事件（鼠标进入），另一个采用的是mouseleave（）事件（鼠标离开）。例如：展示打开“学校概况”和“人才培养”二大项，可以采用如下代码：

<head>

<scripttype="text/JavaScript"src=”js/jquery.js”></script>

$（document）.ready（function（） {

$（'#son1'）.mouseenter（function （）

$（'#son1 ul'）.slideDown（）;

}）

$（'#son1'）.mouseleave（function （） {

$（'#son1 ul'）.slideUp（）;

}）

</script>

$（function （） {

$（'#son3'）.mouseenter（function （） {

$（'#son3 ul'）.slideDown（）;

}）

$（'#son3'）.mouseleave（function （） {

$（'#son3 ul'）.slideUp（）;

}）

</script>

</head>

4 结束语

在網页中，导航栏既是用户使用最频繁的部分，也是构成外观界面的重要组成部分，作为前端开发人员必须学会制作。在网页设计中，导航栏结构最复杂，既有布局对象多，也有动作的交互，制作难度最大。本文介绍的JQuery技术能够轻易进行导航的打开和收缩，使用很少代码就可以完成复杂的操作，是我们进行网页设计时值得优先考虑采用的导航栏设计方法。在网页导航设计中使用JQuery技术，有利于提高设计的速度，减轻网页开发的工作量。因此，掌握JQuery技术设计导航栏对广大从事网站开发及网页设计的技术人员具有很大的实用价值，值得推广使用。

参考文献（References）：

[1] 杨梅.基于HTML5+CSS3的气泡式导航的实现[J].电脑知识

与技术，2020（16）：220-221

[2] 杨公义，曾腾，王肖群，等.北京大学教师教学发展中心网站的

设计与实现[J].软件，2017（38）：7-13

[3] 刘松，蓝鹰.高校门户网站的页面导航布局设计研究[J].智能

计算机与应用.2017（7）：117-118

[4] 孙秀娟，贾民政.基于CSS的网页导航栏的设计[J].软件

开发.2018（5）：32-33

[5] 胡辛征.Web前端开发初级（下册）[M].北京：电子工业出版社，

2019

[6] 周文洁.JavaScript与JQuery网页前端开发与设计[M].北京：

清华大学出版社，2018

收稿日期：2021-10-19

作者简介：余军（1966-），男，广东怀集人，软件工程硕士，高级讲师，主要研究方向：网页前端设计。