亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

基于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

引言

在制作網頁導航欄的過程中，我們往往發(fā)現(xiàn)它是最難設計的部分，樣式多，結構復雜，想要設計出一個美觀大方且實用的導航欄并非易事。設計靜態(tài)的網頁，我們可以通過HTML5布局其結構，運用CSS3控制其樣式，這種做法容易理解，但也帶來代碼很多的問題，我們希望找到更好的方法實現(xiàn)導航欄的設計。

本文介紹一種運用JQuery實現(xiàn)的方法，JQuery是一個JavaScript庫，它通過封裝原生的JavaScript函數(shù)得到一整套定義好的方法[1-4]。開發(fā)JQuery庫的目的是—WRITE LESS，DO MORE（寫的少，做的多）[5-6]。它可以用最少的代碼，完成更多復雜而困難的功能。充分利用JQuery的優(yōu)勢，讓具有交互作用的網頁導航欄在制作上比使用HTML5+CSS3方法更加簡潔、靈活，采用JQuery技術制作方便，結構簡單，是一種值得推廣使用的網頁導航欄制作方法。

1 主流導航欄樣式

目前，網頁設計的基本結構由五大部分組成：頭部，導航欄、縮略圖、內容部分、底部。而網站上導航欄的設計基本上已經形成一種格局，橫向導航，按功能分塊，鼠標懸浮打開，鼠標離開收縮。盡管各個單位網站導航欄樣式及風格不同，但功能上卻是大同小異。下面我們看看華南某高校網站導航欄的設計效果，分成九個大項，分別是學校概況、機構設置、人才培養(yǎng)、科學研究、招生就業(yè)、圖書館、校園生活、人才招聘、合作交流，導航欄效果如圖1所示。

總共九個大項組成的導航欄，每個項都可以單獨展開，例如“人才培養(yǎng)”欄的下拉效果如圖2所示。

2 Html5+CSS3+JQuery導航欄設計方法

制作導航欄一般采用二種方法，第一種是純使用html5+css3制作導航欄，由于交互部分的制作需要較多的代碼，結構復雜，盡量不使用。第二種方法是使用html5+css3進行布局，然后使用Javascript或JQuery進行交互，例如圖1某高校導航欄的結構。因為涉及到用戶的交互，采用Html5+CSS3+JQuery的方式制作是相對簡單的方法，建議使用。我們的做法是分三部分來做，首先建好頁面結構，然后布局樣式，最后設置交互?？梢詫⒚恳粋€大類采用分塊方式分類，每一類的內容采用無序列表排列。下列我們先討論圖1導航欄的頁面結構和樣式表。

2.1 導航欄頁面結構

頁面結構按照導航的分類進行靜態(tài)布局，采用列表方式可以實現(xiàn)大類分類，再用大類分小類排列的形式進行，這樣的結構較清晰。

<！--導航欄開始-->

<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>

</ul>

</li>

<li id="son6"><a href="">圖書館</a

</li>

<ul>

</ul>

</li>

</li>

<ul>

</ul>

</li>

</div>

<！--導航欄結束-->

2.2 導航欄CSS3樣式表結構

樣式表負責設置好導航欄的位置及顯示的狀態(tài)，按照類別由大到小進行樣式的布局，不是十分復雜，所以，樣式表可以建在頁面內，也可采用外部樣式表用<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主要完成交互動作。在完成頁面結構和樣式表之后，就可以做每一類的導航欄目的交互設計，完成下拉及收回的設計?；贘Query技術的導航欄頁面每欄內容是不同的，但結構是相同的，用戶將鼠標懸浮后展開，鼠標離開導航欄收回。由于每個單項的展開代碼寫法相同，所以，可以采用單個類設置好它的交互，然后復制到其他項，只改變它的對象即可，例如，設置好“學校概況”大項的交互之后，就可將過程復制到“人才培養(yǎng)”等大項當中。做法是首先導入JQuery小程序，然后對每個大項進行展開。每個單欄的展開僅用一個函數(shù)的二個事件就可以完成，一個采用的是mouseenter（）事件（鼠標進入），另一個采用的是mouseleave（）事件（鼠標離開）。例如：展示打開“學校概況”和“人才培養(yǎng)”二大項，可以采用如下代碼：

<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 結束語

在網頁中，導航欄既是用戶使用最頻繁的部分，也是構成外觀界面的重要組成部分，作為前端開發(fā)人員必須學會制作。在網頁設計中，導航欄結構最復雜，既有布局對象多，也有動作的交互，制作難度最大。本文介紹的JQuery技術能夠輕易進行導航的打開和收縮，使用很少代碼就可以完成復雜的操作，是我們進行網頁設計時值得優(yōu)先考慮采用的導航欄設計方法。在網頁導航設計中使用JQuery技術，有利于提高設計的速度，減輕網頁開發(fā)的工作量。因此，掌握JQuery技術設計導航欄對廣大從事網站開發(fā)及網頁設計的技術人員具有很大的實用價值，值得推廣使用。

參考文獻（References）：

[1] 楊梅.基于HTML5+CSS3的氣泡式導航的實現(xiàn)[J].電腦知識

與技術，2020（16）：220-221

[2] 楊公義，曾騰，王肖群，等.北京大學教師教學發(fā)展中心網站的

設計與實現(xiàn)[J].軟件，2017（38）：7-13

[3] 劉松，藍鷹.高校門戶網站的頁面導航布局設計研究[J].智能

計算機與應用.2017（7）：117-118

[4] 孫秀娟，賈民政.基于CSS的網頁導航欄的設計[J].軟件

開發(fā).2018（5）：32-33

[5] 胡辛征.Web前端開發(fā)初級（下冊）[M].北京：電子工業(yè)出版社，

2019

[6] 周文潔.JavaScript與JQuery網頁前端開發(fā)與設計[M].北京：

清華大學出版社，2018

收稿日期：2021-10-19

作者簡介：余軍（1966-），男，廣東懷集人，軟件工程碩士，高級講師，主要研究方向：網頁前端設計。