碼上歡樂
相關內容    簡體    繁體

用DIV+CSS制作滑動門導航菜單 原來如此簡單

本文轉載自   查看原文   2015-03-05 18:12   5972    html+css

http://bbs.itcast.cn/thread-17158-1-1.html

一、什么是“滑動門”導航菜單

1.1 “滑動門”處處可見

現在流行的網站設計中，水平導航菜單占據了大壁江山。的確，無論是門戶網站還是企事業單位網站，都大量的采用水平的導航菜單設計。而水平導航菜單中，又有絕大多數網站采用“滑動門”設計。什么是滑動門呢？來看下圖，是筆者任教的學校的官方主頁：

 

從圖中可見，這是一個藍色背景的導航條，各個欄目的名稱依次排列。瀏覽者當前所在的欄目會有一種“玻璃材質”的3D 凸起的效果。與此相同的，用戶用鼠標滑過的鏈接，也有這樣的效果。
這就是“滑動門”技術，它被廣泛的應用在各種網站的設計中。

1.2  為什么要用滑動門技術

首先需要確定的是，制作滑動門導航菜單效果，不需要使用 JavaScript ，而僅僅需要使用 DIV+CSS 技術即可。這對於很多同學來說，是值得興奮的。
然后很多同學都會問了，邵老師，這個“門”在哪兒呢？它是怎么“滑動”的啊？為什么叫它“滑動門”啊。這個問題非常的好，解答這個問題，需要從滑動門效果的的技術難點談起。
“滑動門”效果的難點在於，每個導航欄目的文字個數不一樣多，有的長，有的短，如下圖所示：

 

 2個文字  4個文字  6個文字
 
所以這就是一個技術難點，直覺上，我們會認為，不能用“定死”的一個圖片當做鼠標滑過的時候切換的背景圖片。因為我們這是因為文字的個數不一樣多，如果“定死”一個圖片，那不就會出現下圖的問題么？
背景圖片被重復繪制，產生了錯誤
但是如果為每個欄目按照字數多少，都繪制一個不同長度的背景圖片，這也會帶來兩點問題：
1. 將會影響頁面的加載速度；
2. 需求一旦改變，比如將 4 個字的欄目名稱，變成 5 個字的欄目，難以及時適應這種改變。
那有沒有一種辦法，能夠滿足“用一張背景圖片，適應不同字數”的導航條呢？
答案大家已經猜到了，這就是滑動門技術。

1.3  滑動門技術的核心原理

“滑動門”設計的非常巧妙，采用兩個相同的背景圖像，一左一右，一個負責提供左邊框，一個負責提供右邊框。如下圖所示，較深顏色區域表示二者重疊的部分，當需要容納較多文字時，重疊就少一些，而需要較少文字時，重疊就多一些。兩個圖像可以滑動，重疊的部分的寬度會根據里面的文字的字數而自動調整，就像兩扇推拉門一樣，因此這種技術就叫做“滑動門”。


二、制作“滑動門”效果
2.1  圖片准備

制作滑動門效果，需要准備好兩張圖片，一個是用來做整個菜單的背景色平鋪使用的；一個是是當鼠標經過某個菜單項的時候顯示出來的。

2.2  書寫DIV+CSS設置菜單的整體效果

先搭 HTML 框架，這里的代碼很簡單，直接給大家貼出：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>利用DIV+CSS制作滑動門導航菜單 原來如此簡單</title>
  6. <style>
  7. #menu {
  8.   font-family:Arial;
  9.   font-size:14px;
  10.   margin:0 auto 0 0;
  11.   background:url(bg.png);
  12. }
  14. #menu ul {
  15.   display:block;
  16.   width:500px;
  17.              padding:0 0 0 8px; 
  18.               margin:0; 
  19.           list-style:none; 
  20.           height:47px; 
  21.         }
  22.   
  23.     #menu ul li {
  24.   float:left;
  25. }
  26.     #menu ul li a{
  27.   display:block;
  28.   float:left; 
  29.              line-height:47px; 
  30.   color:#ddd;
  31.   text-decoration:none;
  32.   padding:0 14px 0 14px;
  33. }
  34. #menu ul li a:hover{
  35.   color:#fff; 
  36.               background: url(hover.png);
  37.             }
  38.   
  39. #menu ul li a b{
  40.   display:block;
  41.   padding:0 14px 0 0;
  42.             }
  43.   
  44.           #menu ul li a:hover b{
  45.   color:#fff; 
  46.               background: url(hover.png) no-repeat right top;
  47.             }
  48.            </style>
  49. </head>
  50. <body>
  51.     <div id="menu">
  52. <ul>
  53.    <li><a href="#"><b> 首頁 </b></a></li>
  54.        <li><a href="#"><b> 北京校區 </b></a></li>
  55.        <li><a href="#"><b> 上海校區 </b></a></li>
  56.        <li><a href="#"><b>網頁平面學科  </b></a></li>
  57. </ul>
  58.     </div>
  59. </body>
  60. </html>
復制代碼
每一個鏈接都是一個列表項目的 <li> 標簽，並且設置了它們的左浮動，來讓各列表項橫向排列而不是默認的豎直排列。並且值得注意的一點是，要將 a 元素設置成為塊級元素，這樣整個矩形的范圍內都會響應鼠標事件。我們還要設置行高 line-height 屬性，設置行高可以是文字豎直方向居中排列。
利用 a:hover 偽類選擇器來為它添加鼠標懸停之后的效果。

2.3  制作另一個“鈎子”

我們在每個 <li> 標簽中設置一個文字加粗標記 <b> 。基本思想就是把 <b> 標記作為“鈎子”來設置 CSS 樣式，這個圖片采用的就是 hover.png 文件，不過不同的在於，這個圖片的背景圖片是從右向左展開，這樣就可以出現右邊的邊框了。具體代碼如下：
  1. #menu ul li a b{
  2.   display:block;
  3.   padding:0 14px 0 0;
  4. }
  5.   
  6. #menu ul li a:hover b{
  7.   color:#fff; 
  8.               background: url(hover.png) no-repeat right top;
  9. }
  10. HTML部分：
  11. <ul>
  12.    <li><a href="#"><b> 首頁 </b></a></li>
  13.        <li><a href="#"><b> 北京校區 </b></a></li>
  14.        <li><a href="#"><b> 上海校區 </b></a></li>
  15.        <li><a href="#"><b> 網頁平面學科  </b></a></li>
  16. </ul>
復制代碼

 

這樣，我們非常巧妙的就為滑動門設置好了第二個門。在瀏覽器中瀏覽，發現效果良好。
至此，效果全部完成，完整代碼如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>利用DIV+CSS制作滑動門導航菜單 原來如此簡單</title>
  6. <style>
  7. #menu {
  8.   font-family:Arial;
  9.   font-size:14px;
  10.   margin:0 auto 0 0;
  11.   background:url(bg.png);
  12. }
  14. #menu ul {
  15.   display:block;
  16.   width:500px;
  17.              padding:0 0 0 8px; 
  18.               margin:0; 
  19.           list-style:none; 
  20.           height:47px; 
  21.         }
  22.   
  23.     #menu ul li {
  24.   float:left;
  25. }
  26.     #menu ul li a{
  27.   display:block;
  28.   float:left; 
  29.              line-height:47px; 
  30.   color:#ddd;
  31.   text-decoration:none;
  32.   padding:0 14px 0 14px;
  33. }
  34. #menu ul li a:hover{
  35.   color:#fff; 
  36.               background: url(hover.png);
  37.             }
  38.   
  39. #menu ul li a b{
  40.   display:block;
  41.   padding:0 14px 0 0;
  42.             }
  43.   
  44.           #menu ul li a:hover b{
  45.   color:#fff; 
  46.               background: url(hover.png) no-repeat right top;
  47.             }
  48.            </style>
  49. </head>
  50. <body>
  51.     <div id="menu">
  52. <ul>
  53.    <li><a href="#"><b> 首頁 </b></a></li>
  54.        <li><a href="#"><b> 北京校區 </b></a></li>
  55.        <li><a href="#"><b> 上海校區 </b></a></li>
  56.        <li><a href="#"><b> 網頁平面學科 </b></a></li>
  57. </ul>
  58.     </div>
  59. </body>
  60. </html>
復制代碼
同學們可以發現，真正的難點在於原理，而不是代碼的實現。這就給我們提了個醒，多去總結有經驗的前端開發工程師解決問題的辦法，總結的多了，你自然而然就能舉一反三了。
我非常願意回答同學們的提問，邵老師的郵箱是 shaosh@itcast.cn  。源代碼在本帖的附件。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 CSS - 滑動門技術 DIV+CSS制作二級橫向彈出菜單，略簡單 HTML+CSS技術實現網頁滑動門效果 [div+css]豎排菜單 div+css制作表格 js實現簡單的滑動門和tab選項卡 純CSS滑動門頁面切換效果 CSS基礎(滑動門，雪碧圖，網頁布局） 使用 jQuery 和 CSS3 制作滑動導航菜單 DIV+CSS布局之用li標簽做網頁導航菜單
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM