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

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

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

一、橫向二級導航：

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

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

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

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

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

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

二、縱向二級導航

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

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

同橫向二級導航。

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

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

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

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

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

三、方塊二級導航

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

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

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

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

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

結(jié)語

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