基于HTML的三種導(dǎo)航效果的實現(xiàn)及比較分析

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

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

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

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

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

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

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

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

這段代碼實現(xiàn)一級導(dǎo)航欄目對應(yīng)的二級導(dǎo)航的顯示，當鼠標移動到一級欄目上面時，相應(yīng)二級導(dǎo)航顯示出來。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)語

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