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

特點(diǎn)

今天整理的菜單是由jquery+css開發(fā)有如下特點(diǎn)：

一、通用性強(qiáng)

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

二、美觀自動調(diào)用下拉指示

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

三、調(diào)用簡單

程序員輸出列表簡單不需要很多的判斷，只要遞歸調(diào)用菜單數(shù)據(jù)即可。

實(shí)現(xiàn)

一、HTML代碼

首先我們在頁面輸出菜單數(shù)據(jù)，這些數(shù)據(jù)用ul和li組成構(gòu)成菜單列表。具體結(jié)構(gòu)代碼如下所示：

<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="#">火山爆發(fā)</a></li>

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

  </ul>

 </li>

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

  <ul class="sub_menu">

   <li><a href="#">關(guān)于我們</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="#">飛黃騰達(dá)</a></li>

      </ul>

     </li>

     <li><a href="#">數(shù)據(jù)庫</a>

      <ul class="sub_menu">

       <li><a href="#">數(shù)據(jù)庫表</a></li>

       <li><a href="#">數(shù)據(jù)加密</a></li>

       <li><a href="#">數(shù)據(jù)建模</a></li>

      </ul>

     </li>

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

    </ul>

   </li>

   <li><a href="#">測試產(chǎn)品</a></li>

  </ul>

 </li>

</ul>

一些基本的html代碼，很簡單無需解釋代碼含義，強(qiáng)調(diào)一下代碼結(jié)構(gòu)：無論是二級、三級還是幾級菜單主要是嵌套u(yù)l即可；樣式表名稱也非常單一，子菜單就是“sub_menu”樣式，這樣非常有利于程序代碼循環(huán)調(diào)用。

二、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;}/*主導(dǎo)航箭頭向下*/

.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;}

這里我只強(qiáng)調(diào)兩點(diǎn)注意事項(xiàng)：

1、position中absolute 與 relative區(qū)別

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

A、沒有設(shè)定 Top、Right、Bottom、Left 的情況，默認(rèn)依據(jù)父級的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)。

B. 有設(shè)定 Top、Right、Bottom、Left 的情況，這里又分了兩種情況如下：

　(1). 父級沒 position 屬性，瀏覽器左上角(即 Body)為“坐標(biāo)原始點(diǎn)”進(jìn)行定位，位置由 Top、Right、Bottom、Left 屬性決定。

  (2). 父級有 position 屬性，父級的“坐標(biāo)原始點(diǎn)”為原始點(diǎn)。

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

以上兩種區(qū)別很重要，是十分常用的一個技巧，一定要區(qū)別開，本人在開發(fā)中就浪費(fèi)了很多時間找問題其實(shí)就是因?yàn)檫@兩個屬性引起的。

2、background-position使用

有時候我們?yōu)榱颂嵘W(wǎng)站速度和網(wǎng)站管理方便，經(jīng)常把一些美化常用的小圖片放在一張大圖片上，css需要相應(yīng)的小圖片時就可以通過這個方法來實(shí)現(xiàn)，只要弄明白什么意思調(diào)用起來十分方便。這個方法說明白點(diǎn)就是圖片截取功能，用法具體說明如下：

語法：

background-position : length || length

background-position : position || position

取值：

length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識符組成的長度值。

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

說明：

設(shè)置或檢索對象的背景圖像位置。必須先指定 background-image 屬性。該屬性定位不受對象的補(bǔ)丁屬性( padding )設(shè)置影響。默認(rèn)值為： 0% 0% 。此時背景圖片將被定位于對象不包括補(bǔ)丁( padding )的內(nèi)容區(qū)域的左上角。如果只指定了一個值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為 50% 。如果指定了兩個值，第二個值將用于縱坐標(biāo)。如果設(shè)置值為 right center ，因?yàn)?right 作為橫坐標(biāo)值將會覆蓋 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為基礎(chǔ)的所以首先必須引入jquery代碼庫，然后編寫如下JS代碼實(shí)現(xiàn)下拉菜單。

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

<script>

$(document).ready(function(){

 //為導(dǎo)航設(shè)置默認(rèn)高亮 與本菜單無關(guān)

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

 /*jquery menu 開始*/

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

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

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

 $(".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 結(jié)束*/

})

</script>

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

以上這篇通用無限極下拉菜單的實(shí)現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考