基于JQuery框架的網(wǎng)頁導(dǎo)航設(shè)計
2022-05-27 17:03:11余軍
計算機(jī)時代 2022年5期
關(guān)鍵詞：網(wǎng)頁
摘? 要： 導(dǎo)航欄制作的方法較多，有些網(wǎng)頁導(dǎo)航采用HTML5制作導(dǎo)航內(nèi)容，然后采用CSS3控制樣式，這種制作方式結(jié)構(gòu)簡單，但層次關(guān)系較復(fù)雜、代碼較多、調(diào)試網(wǎng)頁時間長。本文介紹了一種簡單容易的方法，采用輕量級架構(gòu)JQuery，利用JQuery寫得少、做得多的特點(diǎn)，使用盡可能少的代碼，達(dá)到盡可能好的效果。采用JQuery技術(shù)制作的導(dǎo)航，代碼簡潔，結(jié)構(gòu)清晰，是一種值得推廣的好方法。
關(guān)鍵詞： JQuery; 導(dǎo)航欄; 網(wǎng)頁; HTML5; CSS3
中圖分類號：TP311? ? ? ? ? 文獻(xiàn)標(biāo)識碼：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
引言
在制作網(wǎng)頁導(dǎo)航欄的過程中，我們往往發(fā)現(xiàn)它是最難設(shè)計的部分，樣式多，結(jié)構(gòu)復(fù)雜，想要設(shè)計出一個美觀大方且實用的導(dǎo)航欄并非易事。設(shè)計靜態(tài)的網(wǎng)頁，我們可以通過HTML5布局其結(jié)構(gòu)，運(yùn)用CSS3控制其樣式，這種做法容易理解，但也帶來代碼很多的問題，我們希望找到更好的方法實現(xiàn)導(dǎo)航欄的設(shè)計。
本文介紹一種運(yùn)用JQuery實現(xiàn)的方法，JQuery是一個JavaScript庫，它通過封裝原生的JavaScript函數(shù)得到一整套定義好的方法[1-4]。開發(fā)JQuery庫的目的是—WRITE LESS，DO MORE（寫的少，做的多）[5-6]。它可以用最少的代碼，完成更多復(fù)雜而困難的功能。充分利用JQuery的優(yōu)勢，讓具有交互作用的網(wǎng)頁導(dǎo)航欄在制作上比使用HTML5+CSS3方法更加簡潔、靈活，采用JQuery技術(shù)制作方便，結(jié)構(gòu)簡單，是一種值得推廣使用的網(wǎng)頁導(dǎo)航欄制作方法。
1 主流導(dǎo)航欄樣式
目前，網(wǎng)頁設(shè)計的基本結(jié)構(gòu)由五大部分組成：頭部，導(dǎo)航欄、縮略圖、內(nèi)容部分、底部。而網(wǎng)站上導(dǎo)航欄的設(shè)計基本上已經(jīng)形成一種格局，橫向?qū)Ш?，按功能分塊，鼠標(biāo)懸浮打開，鼠標(biāo)離開收縮。盡管各個單位網(wǎng)站導(dǎo)航欄樣式及風(fēng)格不同，但功能上卻是大同小異。下面我們看看華南某高校網(wǎng)站導(dǎo)航欄的設(shè)計效果，分成九個大項，分別是學(xué)校概況、機(jī)構(gòu)設(shè)置、人才培養(yǎng)、科學(xué)研究、招生就業(yè)、圖書館、校園生活、人才招聘、合作交流，導(dǎo)航欄效果如圖1所示。
總共九個大項組成的導(dǎo)航欄，每個項都可以單獨(dú)展開，例如“人才培養(yǎng)”欄的下拉效果如圖2所示。
2 Html5+CSS3+JQuery導(dǎo)航欄設(shè)計方法
制作導(dǎo)航欄一般采用二種方法，第一種是純使用html5+css3制作導(dǎo)航欄，由于交互部分的制作需要較多的代碼，結(jié)構(gòu)復(fù)雜，盡量不使用。第二種方法是使用html5+css3進(jìn)行布局，然后使用Javascript或JQuery進(jìn)行交互，例如圖1某高校導(dǎo)航欄的結(jié)構(gòu)。因為涉及到用戶的交互，采用Html5+CSS3+JQuery的方式制作是相對簡單的方法，建議使用。我們的做法是分三部分來做，首先建好頁面結(jié)構(gòu)，然后布局樣式，最后設(shè)置交互?？梢詫⒚恳粋€大類采用分塊方式分類，每一類的內(nèi)容采用無序列表排列。下列我們先討論圖1導(dǎo)航欄的頁面結(jié)構(gòu)和樣式表。
2.1 導(dǎo)航欄頁面結(jié)構(gòu)
頁面結(jié)構(gòu)按照導(dǎo)航的分類進(jìn)行靜態(tài)布局，采用列表方式可以實現(xiàn)大類分類，再用大類分小類排列的形式進(jìn)行，這樣的結(jié)構(gòu)較清晰。
<！--導(dǎo)航欄開始-->
<div class="nav">
<li id="son1"><a href="">學(xué)校概況</a>
<ul>
<li><a href="">學(xué)校簡介</a></li>
<li><a href="">學(xué)校歷史</a></li>
<！—接上面導(dǎo)航欄開始-->
<li><a href="">學(xué)校標(biāo)識</a></li>
</ul>
</li>
<li id="son2"><a href="">機(jī)構(gòu)設(shè)置</a>
</li>
<li id="son3"><a href="">人才培養(yǎng)</a>
<ul>
<li><a href="">師資隊伍</a></li>
<li><a href="">本科生教育</a></li>
<li><a href="">研究生教育</a></li>
</ul>
</li>
<li id="son4"><a href="">科學(xué)研究</a>
<ul>
<li><a href="">研究機(jī)構(gòu)</a></li>
<li><a href="">學(xué)術(shù)期刊</a></li>
<li><a href="">自然科學(xué)</a></li>
</ul>
</li>
<li id="son5"><a href="">招生就業(yè)</a>
<ul>
<li><a href="">本科生招生</a></li>
<li><a href="">研究生招生</a></li>
<li><a href="">繼續(xù)教育招生</a></li>
</ul>
</li>
<li id="son6"><a href="">圖書館</a
</li>
<li id="son7"><a href="">校園生活</a>
<ul>
<li><a href="">校園風(fēng)光</a></li>
<li><a href="">校園地圖</a></li>
<li><a href="">社交應(yīng)用</a></li>
</ul>
</li>
<li id="son8"><a href="">圖書館</a>
</li>
<li id="son9"><a href="">合作交流</a>
<ul>
<li><a href="">出防事務(wù)</a></li>
<li><a href="">國際交流</a></li>
<li><a href="">海外學(xué)習(xí)</a></li>
</ul>
</li>
</div>
<！--導(dǎo)航欄結(jié)束-->
2.2 導(dǎo)航欄CSS3樣式表結(jié)構(gòu)
樣式表負(fù)責(zé)設(shè)置好導(dǎo)航欄的位置及顯示的狀態(tài)，按照類別由大到小進(jìn)行樣式的布局，不是十分復(fù)雜，所以，樣式表可以建在頁面內(nèi)，也可采用外部樣式表用<link>語句進(jìn)行連接。
<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主要完成交互動作。在完成頁面結(jié)構(gòu)和樣式表之后，就可以做每一類的導(dǎo)航欄目的交互設(shè)計，完成下拉及收回的設(shè)計。基于JQuery技術(shù)的導(dǎo)航欄頁面每欄內(nèi)容是不同的，但結(jié)構(gòu)是相同的，用戶將鼠標(biāo)懸浮后展開，鼠標(biāo)離開導(dǎo)航欄收回。由于每個單項的展開代碼寫法相同，所以，可以采用單個類設(shè)置好它的交互，然后復(fù)制到其他項，只改變它的對象即可，例如，設(shè)置好“學(xué)校概況”大項的交互之后，就可將過程復(fù)制到“人才培養(yǎng)”等大項當(dāng)中。做法是首先導(dǎo)入JQuery小程序，然后對每個大項進(jìn)行展開。每個單欄的展開僅用一個函數(shù)的二個事件就可以完成，一個采用的是mouseenter（）事件（鼠標(biāo)進(jìn)入），另一個采用的是mouseleave（）事件（鼠標(biāo)離開）。例如：展示打開“學(xué)校概況”和“人才培養(yǎng)”二大項，可以采用如下代碼：
<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 結(jié)束語
在網(wǎng)頁中，導(dǎo)航欄既是用戶使用最頻繁的部分，也是構(gòu)成外觀界面的重要組成部分，作為前端開發(fā)人員必須學(xué)會制作。在網(wǎng)頁設(shè)計中，導(dǎo)航欄結(jié)構(gòu)最復(fù)雜，既有布局對象多，也有動作的交互，制作難度最大。本文介紹的JQuery技術(shù)能夠輕易進(jìn)行導(dǎo)航的打開和收縮，使用很少代碼就可以完成復(fù)雜的操作，是我們進(jìn)行網(wǎng)頁設(shè)計時值得優(yōu)先考慮采用的導(dǎo)航欄設(shè)計方法。在網(wǎng)頁導(dǎo)航設(shè)計中使用JQuery技術(shù)，有利于提高設(shè)計的速度，減輕網(wǎng)頁開發(fā)的工作量。因此，掌握J(rèn)Query技術(shù)設(shè)計導(dǎo)航欄對廣大從事網(wǎng)站開發(fā)及網(wǎng)頁設(shè)計的技術(shù)人員具有很大的實用價值，值得推廣使用。
參考文獻(xiàn)（References）：
[1] 楊梅.基于HTML5+CSS3的氣泡式導(dǎo)航的實現(xiàn)[J].電腦知識
與技術(shù)，2020（16）：220-221
[2] 楊公義，曾騰，王肖群，等.北京大學(xué)教師教學(xué)發(fā)展中心網(wǎng)站的
設(shè)計與實現(xiàn)[J].軟件，2017（38）：7-13
[3] 劉松，藍(lán)鷹.高校門戶網(wǎng)站的頁面導(dǎo)航布局設(shè)計研究[J].智能
計算機(jī)與應(yīng)用.2017（7）：117-118
[4] 孫秀娟，賈民政.基于CSS的網(wǎng)頁導(dǎo)航欄的設(shè)計[J].軟件
開發(fā).2018（5）：32-33
[5] 胡辛征.Web前端開發(fā)初級（下冊）[M].北京：電子工業(yè)出版社，
2019
[6] 周文潔.JavaScript與JQuery網(wǎng)頁前端開發(fā)與設(shè)計[M].北京：
清華大學(xué)出版社，2018
收稿日期：2021-10-19
作者簡介：余軍（1966-），男，廣東懷集人，軟件工程碩士，高級講師，主要研究方向：網(wǎng)頁前端設(shè)計。
猜你喜歡
電子制作(2018年10期)2018-08-04 03:24:38
魅力中國(2018年5期)2018-07-30 11:11:58
電子制作(2017年2期)2017-05-17 03:54:56
電子測試(2015年18期)2016-01-14 01:22:58
計算機(jī)與網(wǎng)絡(luò)(2014年7期)2014-03-25 10:57:07
電腦迷(2012年4期)2012-04-29 06:12:13
