DIV CSS 佈局教程網

下拉菜單在我開發中經常遇到，但是沒個項目都需要從新編寫，改起來雖然簡單但是很麻煩，我這個人還是比較懶的，今天有時間把我以前的項目開發中的菜單整理一遍，編寫一個通用版本，以後就不需要那麼麻煩了。

特點

今天整理的菜單是由jquery+css開發有如下特點：

一、通用性強

以前在用的一個下拉菜單有個問題，需要對主導航和子菜單進行單獨的設置，比如，二級菜單是class="first_menu",三級菜單是class="second_menu"....依次類推，這樣的寫法有個問題就是不利於程序員執行循環輸出，而本菜單只需引入一個CSS樣式即可，無需對多級菜單定義。

二、美觀自動調用下拉指示

以前我們手工會對下拉菜單添加一個下拉展示的class，而現在，只需要在css中定義好下拉效果的樣式，代碼會自動尋找下拉菜單並且添加指示箭頭；

三、調用簡單

程序員輸出列表簡單不需要很多的判斷，只要遞歸調用菜單數據即可。

實現

一、HTML代碼

   首先我們在頁面輸出菜單數據，這些數據用ul和li組成構成菜單列表。具體結構代碼如下所示：

<ul class="Menue">

 <li class="Menue_li"><a href="#">首頁</a></li>

 <li class="Menue_li"><a href="#">菜單一</a>

  <ul class="sub_menu">

   <li><a href="#">過山車</a></li>

   <li><a href="#">火山爆發</a></li>

   <li><a href="#">小小鳥</a></li>

  </ul>

 </li>

 <li class="Menue_li"><a href="#">菜單二</a>

  <ul class="sub_menu">

   <li><a href="#">關於我們</a>

    <ul class="sub_menu">

     <li><a href="#">山高地緣</a>

      <ul class="sub_menu">

       <li><a href="#">飛鴿傳書</a></li>

       <li><a href="#">生生世世</a></li>

       <li><a href="#">飛黃騰達</a></li>

      </ul>

     </li>

     <li><a href="#">數據庫</a>

      <ul class="sub_menu">

       <li><a href="#">數據庫表</a></li>

       <li><a href="#">數據加密</a></li>

       <li><a href="#">數據建模</a></li>

      </ul>

     </li>

     <li><a href="#">C攝像頭</a></li>

    </ul>

   </li>

   <li><a href="#">測試產品</a></li>

  </ul>

 </li>

</ul>

一些基本的html代碼，很簡單無需解釋代碼含義，強調一下代碼結構：無論是二級、三級還是幾級菜單主要是嵌套ul即可；樣式表名稱也非常單一，子菜單就是“sub_menu”樣式，這樣非常有利於程序代碼循環調用。

二、CSS樣式

Css樣式代碼也非常簡單，具體代碼如下：

a { text-decoration:none; }

ul, li { list-style:none; margin:0; padding:0; }

/*定義菜單*/

.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }

.Menue li a { color:#fff; font-size:14px; display:block; }

/*下拉菜單樣式*/

ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }

.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }

.Menue li ul.sub_menu li.last { border-bottom:none; } /*js會對最後一個li添加該class，去掉border-bottom效果*/

.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }

.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;}

.Menue li.now,.Menue li.current { background:#f60;color:#fff;}

/*如果有下拉菜單添加的class*/

.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主導航箭頭向下*/

.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜單箭頭向右*/

.Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}

.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}

這裡我只強調兩點注意事項：

1、position中absolute 與 relative區別

absolute：絕對定位，CSS 寫法“ position: absolute; ”，它的定位分兩種情況，如下：

A、沒有設定 Top、Right、Bottom、Left 的情況，默認依據父級的“內容區域原始點”為原始點。

B. 有設定 Top、Right、Bottom、Left 的情況，這裡又分了兩種情況如下：

　(1). 父級沒 position 屬性，浏覽器左上角(即 Body)為“坐標原始點”進行定位，位置由 Top、Right、Bottom、Left 屬性決定。

  (2). 父級有 position 屬性，父級的“坐標原始點”為原始點。

relative：相對定位，CSS 寫法“ position: relative; ”，參照父級的“內容區域原始點”為原始點，無父級則以 Body 的“內容區域原始點”為原始點，位置由 Top、Right、Bottom、Left 屬性決定，且有“撐開或占據高度”的作用。

    以上兩種區別很重要，是十分常用的一個技巧，一定要區別開，本人在開發中就浪費了很多時間找問題其實就是因為這兩個屬性引起的。

2、background-position使用

有時候我們為了提升網站速度和網站管理方便，經常把一些美化常用的小圖片放在一張大圖片上，css需要相應的小圖片時就可以通過這個方法來實現，只要弄明白什麼意思調用起來十分方便。這個方法說明白點就是圖片截取功能，用法具體說明如下：

語法：

background-position : length || length

background-position : position || position

取值：

length : 百分數 | 由浮點數字和單位標識符組成的長度值。

position :top | center | bottom | left | center | right

說明：
設置或檢索對象的背景圖像位置。必須先指定 background-image 屬性。該屬性定位不受對象的補丁屬性( padding )設置影響。默認值為： 0% 0% 。此時背景圖片將被定位於對象不包括補丁( padding )的內容區域的左上角。如果只指定了一個值，該值將用於橫坐標。縱坐標將默認為 50% 。如果指定了兩個值，第二個值將用於縱坐標。如果設置值為 right center ，因為 right 作為橫坐標值將會覆蓋 center 值，所以背景圖片將被居右定位。下面是一些等式

top left, left top 等價於 0% 0%.

top, top center, center top 等價於 50% 0%.

right top, top right 等價於 100% 0%.

left, left center, center left 等價於 0% 50%.

center, center center 等價於 50% 50%.

right, right center, center right 等價於 100% 50%.

bottom left, left bottom 等價於 0% 100%.

bottom, bottom center, center bottom 等價於 50% 100%.

bottom right, right bottom 等價於 100% 100%

三、JS代碼

本菜單是以jquery為基礎的所以首先必須引入jquery代碼庫，然後編寫如下JS代碼實現下拉菜單。

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

 //為導航設置默認高亮 與本菜單無關

 $("ul.Menue li.Menue_li:eq(0)").addClass("current")

 /*jquery menu 開始*/

 //為子菜單的最後一個li添加樣式，適合為li添加下劃線時去除最後一個的下劃線

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍歷全部li，判斷是否包含子菜單，如果包含則為其添加箭頭指示狀態

 $(".Menue li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 

 //

 $(".Menue li").hover(function(){

 $(this).addClass("now");

 var menu = $(this);

  menu.find("ul.sub_menu:first").show();

 },function(){

 $(this).removeClass("now");

 $(this).find("ul.sub_menu:first").hide();

 });

 

 var submenu = $(".sub_menu").find(".sub_menu")

 submenu.css({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

 $(this).find("a:first").addClass("now")

 $(this).find("ul:first").show();

 },function(){

 $(this).find("a:first").removeClass("now")

 $(this).find("ul:first").hide()

 });

/*jquery menu 結束*/

})

</script>

通過以上步驟就實現了一個通用的多級菜單，上面代碼是本人日常開發中的積累，由於本人水平有限可能存在著許多錯誤希望同僚們批評指正或提出更優化的代碼供本人參考，謝謝。

以上這篇通用無限極下拉菜單的實現代碼就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持。