網頁前端滑動門技術剖析

董桃利 馬占鋒

摘要：隨著互“聯網+”時代的到來，網頁前端技術越來越受到大家的青睞。在頁面前端技術中，為了使頁面整體看上去美觀，常常需要給頁面菜單設置不規則的背景圖，但由于導航的內容隨時需要變更，導航背景不能自適應，這樣就給頁面更改帶來了很多麻煩，本文通過典型案例剖析、講解如何通過滑動門技術來解決這一系列問題。

關鍵詞：前端技術；導航；滑動門技術

中圖分類號：TP393 文獻標識碼：A 文章編號：1007-9416（2018）07-0235-02

隨著時代的發展，網頁前端技術越來越受到大家的追捧。前端技術不僅是新奇的技術，更重要的是它的一些全新概念，這將給互聯網帶來更多無限的可能。在頁面中導航菜單是每個頁面的主題所在，因此每個網站都會把自己的導航菜單做的盡善盡美，然而菜單導航內容與背景不能自適應一直困擾著程序設計者。滑塊門技術很好的解決了這一問題，在滑塊門技術的使用上學者會遇到這樣或者這樣的問題。下面筆者將通過由淺入深、理論結合實踐，對這門技術進行詳細的闡述。

1 工作原理

滑動門技術工作原理：在頁面導航中，把整個導航模塊設置為一個盒子模型。每一項菜單文字的兩邊各使用一組容器標簽，用來設置不規則背景圖像；每一項菜單文字放在一個盒子模型中，背景填充為規則的背景圖， 此盒子的寬度由盒子內容文字自動撐開；兩邊的不規則圖像之間的距離就像兩扇推拉門一樣，受到中間文字長度控制，因此把這一項技術稱為“滑動門”技術。

滑動門技術的實現的關鍵技術就是對圖片切片和拼接。切片的實現：切片是為了滿足頁面版面設計的特殊需求，通常把效果圖中需要的部分剪切下來作為網頁制作時所需的素材。拼接的實現：定義三個盒子模型，第一個和第三個盒子的寬度和高度設置為對應的圖片寬和高，并且分別設為盒子背景為切片所得hd_left和hd_right圖片；中間的盒子只設置高度不指定寬度，盒子的寬度會被內容自動撐開，盒子背景設為切片所得hd_middle圖片，并且必須設置圖片為X軸平鋪特效。

2 案例分析

滑動門技術在網頁前端技術中用途廣泛，下面理論聯系實際，結合具體案例對滑動門技術進行詳細講解，以加深學者對滑動門技術的理解和應用能力。

（1）分析效果圖。通常在頁面導航中，頁面導航菜單項分為多個子菜單，每個子菜單項文字長度因需求各不相同，效果圖如圖1所示。對每一個子菜單項進行分析，會發現每一個子菜單項的結構是類似的，每一項是由左、右兩張不規則圖片和中間自由擴展長度的圖片組成。（2）切片圖片。為了滿足導航菜單中不同長度菜單項目顯示效果一致的這種特殊要求的版面效果，需要把美工設計的菜單項中有用的部分剪切下來用作網頁素材，這一過程在網頁設計中就是切片。切片中需要注意對圖片的特殊需求進行分析。導航美工設計圖導航項目原圖如圖2-1所示。經需求分析，按照需求和切片原則對其進行切片，切片為三張資源素材。切片后得到圖片素材nav_left.png、nav_middle.png、nav_right.png。分別如圖2-2、圖2-3、圖2-4所示。（3） 搭建頁面結構。在頁面中實現導航效果，用的是列表標簽

。菜單欄的每一項通過列表項標簽
• 實現，將子菜單項兩側的不規則圖形分別以標簽背景圖的形式來實現，中間的圖片設這為列表項中標簽的背景圖，這是導航菜單采用最多的設計方案，核心代碼段如圖3所示。（4）定義CSS樣式。通過使用CSS樣式實現菜單自動滑動門特效。在CSS樣式中，首先，進行整體頁面設置，設置外邊距、內邊距、列表項清零；其次，設置導航菜單整體寬度、高度、及導航水平居中；第三步，設置盒子模型每一個盒子模型的高，以及設置盒子為左浮動；第四步，設置、、的背景效果特效，核心代碼如表1所示。

  3 結語

  本文結合實際案例通過深入淺出理論結合實踐的細致講解，對使用頁面前端滑動門技術實現不規則菜單進行了深度闡述，旨在使學習者能夠充分掌握這門實了用的技術，能夠游刃有余的進行頁面前端設計。

  參考文獻

  [1]徐平.基于CSS技術的網頁導航欄制作[J].無線互聯科技，2016，（07）：39-40.

  [2]張琳.淺析HTML5+CSS3在網頁設計中的新特性及優勢[J].西安文理學院學報（自然科學版），2017，（06）：82-84.

  [3]葛藍.基于HTML5+CSS3的網頁布局[J].數字技術與應用，2017，（10）：92-93.

  [4]李君君.HTML5+CSS3在電子商務網站建設中的優勢[J].信息與電腦（理論版），2018，（03）：27-29.

  [5]嚴偉中.關于HTML5的核心技術研究與應用[J].網絡安全技術與應用，2014，（03）：30.