通用無限極下拉選單的實作程式碼

這篇文章主要介紹了關於通用無限極下拉選單的實現程式碼，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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

特點

今天整理的選單是由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>

通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考，谢谢。

以上是通用無限極下拉選單的實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！