基于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 導航欄頁面結構
頁面結構按照導航的分類進行靜態布局，采用列表方式可以實現大類分類，再用大類分小類排列的形式進行，這樣的結構較清晰。
<！--導航欄開始-->
<div class="nav">
<li id="son1"><a href="">學校概況</a>
<ul>
<li><a href="">學校簡介</a></li>
<li><a href="">學校歷史</a></li>
<！—接上面導航欄開始-->
<li><a href="">學校標識</a></li>
</ul>
</li>
<li id="son2"><a href="">機構設置</a>
</li>
<li id="son3"><a href="">人才培養</a>
<ul>
<li><a href="">師資隊伍</a></li>
<li><a href="">本科生教育</a></li>
<li><a href="">研究生教育</a></li>
</ul>
</li>
<li id="son4"><a href="">科學研究</a>
<ul>
<li><a href="">研究機構</a></li>
<li><a href="">學術期刊</a></li>
<li><a href="">自然科學</a></li>
</ul>
</li>
<li id="son5"><a href="">招生就業</a>
<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>
<li id="son7"><a href="">校園生活</a>
<ul>
<li><a href="">校園風光</a></li>
<li><a href="">校園地圖</a></li>
<li><a href="">社交應用</a></li>
</ul>
</li>
<li id="son8"><a href="">圖書館</a>
</li>
<li id="son9"><a href="">合作交流</a>
<ul>
<li><a href="">出防事務</a></li>
<li><a href="">國際交流</a></li>
<li><a href="">海外學習</a></li>
</ul>
</li>
</div>
<！--導航欄結束-->
2.2 導航欄CSS3樣式表結構
樣式表負責設置好導航欄的位置及顯示的狀態，按照類別由大到小進行樣式的布局，不是十分復雜，所以，樣式表可以建在頁面內，也可采用外部樣式表用<link>語句進行連接。
<head>
<style type="text/css">
.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技術的導航欄頁面每欄內容是不同的，但結構是相同的，用戶將鼠標懸浮后展開，鼠標離開導航欄收回。由于每個單項的展開代碼寫法相同，所以，可以采用單個類設置好它的交互，然后復制到其他項，只改變它的對象即可，例如，設置好“學校概況”大項的交互之后，就可將過程復制到“人才培養”等大項當中。做法是首先導入JQuery小程序，然后對每個大項進行展開。每個單欄的展開僅用一個函數的二個事件就可以完成，一個采用的是mouseenter（）事件（鼠標進入），另一個采用的是mouseleave（）事件（鼠標離開）。例如：展示打開“學校概況”和“人才培養”二大項，可以采用如下代碼：
<head>
<scripttype="text/JavaScript"src=”js/jquery.js”></script>
<script type="text/JavaScript">
$（document）.ready（function（） {
$（'#son1'）.mouseenter（function （）
$（'#son1 ul'）.slideDown（）;
}）
$（'#son1'）.mouseleave（function （） {
$（'#son1 ul'）.slideUp（）;
}）
}）
</script>
<script type="text/JavaScript">
$（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-），男，廣東懷集人，軟件工程碩士，高級講師，主要研究方向：網頁前端設計。
