（湖南工程職業(yè)技術(shù)學(xué)院 湖南長(zhǎng)沙 410151）

在網(wǎng)站網(wǎng)頁(yè)中經(jīng)常要用到二級(jí)導(dǎo)航，為了方便瀏覽及網(wǎng)頁(yè)美化，有多種效果的二級(jí)導(dǎo)航。本文就如何在網(wǎng)頁(yè)中實(shí)現(xiàn)常見(jiàn)的導(dǎo)航效果以及對(duì)實(shí)現(xiàn)方法進(jìn)行了探討，基本解決二級(jí)導(dǎo)航中的實(shí)現(xiàn)及應(yīng)用問(wèn)題。對(duì)這些導(dǎo)航效果如何布局、如何實(shí)現(xiàn)效果、以及何時(shí)應(yīng)用進(jìn)行探討和驗(yàn)證。[1]

一、橫向二級(jí)導(dǎo)航：

如下圖在該網(wǎng)頁(yè)實(shí)現(xiàn)橫向二級(jí)導(dǎo)航的效果：

1.頁(yè)面布局：在ul標(biāo)記中再加入ul標(biāo)記做為二級(jí)導(dǎo)航。

2.顯示效果及實(shí)現(xiàn)方法

先在頁(yè)面中只顯示一級(jí)導(dǎo)航，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航相關(guān)欄目上時(shí)，再顯示對(duì)應(yīng)欄目的二級(jí)導(dǎo)航。所以事先要隱藏所有的二級(jí)導(dǎo)航。對(duì)應(yīng)的CSS代碼如下：

這段css 代碼實(shí)現(xiàn)二級(jí)導(dǎo)航的隱藏，并確實(shí)二級(jí)導(dǎo)航的定位方法為絕對(duì)定位，離一級(jí)導(dǎo)航的頂部為35個(gè)點(diǎn)的距離，離一級(jí)導(dǎo)航相關(guān)欄目左邊的距離，另外確定。如下：

這段代碼實(shí)現(xiàn)一級(jí)導(dǎo)航欄目對(duì)應(yīng)的二級(jí)導(dǎo)航的顯示，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)欄目上面時(shí)，相應(yīng)二級(jí)導(dǎo)航顯示出來(lái)。

二、縱向二級(jí)導(dǎo)航

如下圖在該網(wǎng)頁(yè)實(shí)現(xiàn)縱向二級(jí)導(dǎo)航的效果：

1.頁(yè)面布局：在ul標(biāo)記中再加入ul標(biāo)記做為二級(jí)導(dǎo)航。[2]

同橫向二級(jí)導(dǎo)航。

2.顯示效果及實(shí)現(xiàn)方法

先在頁(yè)面中只顯示一級(jí)導(dǎo)航，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航相關(guān)欄目上時(shí)，再縱向向下下拉顯示出來(lái)對(duì)應(yīng)欄目的二級(jí)導(dǎo)航；鼠標(biāo)離開(kāi)時(shí)隱藏。所以事先要隱藏所有的二級(jí)導(dǎo)航。對(duì)應(yīng)的CSS代碼如下：

這段css 代碼實(shí)現(xiàn)二級(jí)導(dǎo)航的隱藏，并確實(shí)二級(jí)導(dǎo)航的定位方法為絕對(duì)定位，離一級(jí)導(dǎo)航的頂部為40個(gè)點(diǎn)的距離。

這段css 代碼實(shí)現(xiàn)二級(jí)導(dǎo)航的隱藏，并確實(shí)二級(jí)導(dǎo)航的定位方法為絕對(duì)定位，離一級(jí)導(dǎo)航的頂部為40個(gè)點(diǎn)的距離。

這段jquery代碼，實(shí)現(xiàn)鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航相關(guān)欄目上時(shí)，再縱向向下下拉顯示出來(lái)對(duì)應(yīng)欄目的二級(jí)導(dǎo)航；鼠標(biāo)離開(kāi)時(shí)隱藏。

三、方塊二級(jí)導(dǎo)航

如下圖在網(wǎng)頁(yè)實(shí)現(xiàn)方塊二級(jí)導(dǎo)航的效果：

1.頁(yè)面布局：在ul標(biāo)記中再加入div標(biāo)記做為二級(jí)導(dǎo)航。

2.顯示效果及實(shí)現(xiàn)方法

先在頁(yè)面中只顯示一級(jí)導(dǎo)航，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)導(dǎo)航相關(guān)欄目上時(shí)，再左邊顯示出來(lái)對(duì)應(yīng)欄目的二級(jí)導(dǎo)航；鼠標(biāo)離開(kāi)時(shí)隱藏。所以事先要隱藏所有的二級(jí)導(dǎo)航。對(duì)應(yīng)的CSS代碼如下：

這段代碼實(shí)現(xiàn)一級(jí)導(dǎo)航欄目對(duì)應(yīng)的二級(jí)導(dǎo)航的顯示，當(dāng)鼠標(biāo)移動(dòng)到一級(jí)欄目上面時(shí)，相應(yīng)二級(jí)導(dǎo)航顯示出來(lái)。[3]

結(jié)語(yǔ)

頁(yè)面中經(jīng)常用到這三種形式的二級(jí)導(dǎo)航：橫向二級(jí)導(dǎo)航、縱向二級(jí)導(dǎo)航、方塊二級(jí)導(dǎo)航，對(duì)于初次開(kāi)發(fā)者而言，這是必須要經(jīng)過(guò)的一道坎。就本文而言，有助于初次開(kāi)發(fā)者少走彎路，掌握三種二級(jí)導(dǎo)航的基本用法，從而為開(kāi)發(fā)出一個(gè)實(shí)用的網(wǎng)頁(yè)打下堅(jiān)實(shí)的基礎(chǔ)。橫向地級(jí)導(dǎo)航，主要用于節(jié)省頁(yè)面空間，不影響頁(yè)面整體顯示效果；縱向二級(jí)導(dǎo)航主要用于二級(jí)導(dǎo)航長(zhǎng)度相差不大的地方，可以直接顯示，也可以下滑顯示；方塊二級(jí)導(dǎo)航主要用于二級(jí)導(dǎo)航量比較大的場(chǎng)合，比如淘寶、京東等。主要技術(shù)就是布局方式、定準(zhǔn)方式，css或jquery中的hover 事件效果等。