通用無限極下拉菜單的實(shí)現(xiàn)代碼
下拉菜單在我開發(fā)中經(jīng)常遇到，但是沒個(gè)項(xiàng)目都需要從新編寫，改起來雖然簡(jiǎn)單但是很麻煩，我這個(gè)人還是比較懶的，今天有時(shí)間把我以前的項(xiàng)目開發(fā)中的菜單整理一遍，編寫一個(gè)通用版本，以后就不需要那么麻煩了。
特點(diǎn)
今天整理的菜單是由jquery+css開發(fā)有如下特點(diǎn)：
一、通用性強(qiáng)
以前在用的一個(gè)下拉菜單有個(gè)問題，需要對(duì)主導(dǎo)航和子菜單進(jìn)行單獨(dú)的設(shè)置，比如，二級(jí)菜單是class="first_menu",三級(jí)菜單是class="second_menu"....依次類推，這樣的寫法有個(gè)問題就是不利于程序員執(zhí)行循環(huán)輸出，而本菜單只需引入一個(gè)CSS樣式即可，無需對(duì)多級(jí)菜單定義。
二、美觀自動(dòng)調(diào)用下拉指示
以前我們手工會(huì)對(duì)下拉菜單添加一個(gè)下拉展示的class，而現(xiàn)在，只需要在css中定義好下拉效果的樣式，代碼會(huì)自動(dòng)尋找下拉菜單并且添加指示箭頭；
三、調(diào)用簡(jiǎn)單
程序員輸出列表簡(jiǎn)單不需要很多的判斷，只要遞歸調(diào)用菜單數(shù)據(jù)即可。
實(shí)現(xiàn)
一、HTML代碼
首先我們?cè)陧?yè)面輸出菜單數(shù)據(jù)，這些數(shù)據(jù)用ul和li組成構(gòu)成菜單列表。具體結(jié)構(gòu)代碼如下所示：
<ul class="Menue">
<li class="Menue_li"><a href="#">首頁(yè)</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ù)庫(kù)</a>
<ul class="sub_menu">
<li><a href="#">數(shù)據(jù)庫(kù)表</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="#">測(cè)試產(chǎn)品</a></li>
</ul>
</li>
</ul>
一些基本的html代碼，很簡(jiǎn)單無需解釋代碼含義，強(qiáng)調(diào)一下代碼結(jié)構(gòu)：無論是二級(jí)、三級(jí)還是幾級(jí)菜單主要是嵌套u(yù)l即可；樣式表名稱也非常單一，子菜單就是“sub_menu”樣式，這樣非常有利于程序代碼循環(huán)調(diào)用。
二、CSS樣式
Css樣式代碼也非常簡(jiǎn)單，具體代碼如下：
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會(huì)對(duì)最后一個(gè)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：絕對(duì)定位，CSS 寫法“ position: absolute; ”，它的定位分兩種情況，如下：
A、沒有設(shè)定 Top、Right、Bottom、Left 的情況，默認(rèn)依據(jù)父級(jí)的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)。
B. 有設(shè)定 Top、Right、Bottom、Left 的情況，這里又分了兩種情況如下：
(1). 父級(jí)沒 position 屬性，瀏覽器左上角(即 Body)為“坐標(biāo)原始點(diǎn)”進(jìn)行定位，位置由 Top、Right、Bottom、Left 屬性決定。
(2). 父級(jí)有 position 屬性，父級(jí)的“坐標(biāo)原始點(diǎn)”為原始點(diǎn)。
relative：相對(duì)定位，CSS 寫法“ position: relative; ”，參照父級(jí)的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，無父級(jí)則以 Body 的“內(nèi)容區(qū)域原始點(diǎn)”為原始點(diǎn)，位置由 Top、Right、Bottom、Left 屬性決定，且有“撐開或占據(jù)高度”的作用。
以上兩種區(qū)別很重要，是十分常用的一個(gè)技巧，一定要區(qū)別開，本人在開發(fā)中就浪費(fèi)了很多時(shí)間找問題其實(shí)就是因?yàn)檫@兩個(gè)屬性引起的。
2、background-position使用
有時(shí)候我們?yōu)榱颂嵘W(wǎng)站速度和網(wǎng)站管理方便，經(jīng)常把一些美化常用的小圖片放在一張大圖片上，css需要相應(yīng)的小圖片時(shí)就可以通過這個(gè)方法來實(shí)現(xiàn)，只要弄明白什么意思調(diào)用起來十分方便。這個(gè)方法說明白點(diǎn)就是圖片截取功能，用法具體說明如下：
語法：
background-position : length || length
background-position : position || position
取值：
length : 百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。
position :top | center | bottom | left | center | right
說明：
設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定 background-image 屬性。該屬性定位不受對(duì)象的補(bǔ)丁屬性( padding )設(shè)置影響。默認(rèn)值為： 0% 0% 。此時(shí)背景圖片將被定位于對(duì)象不包括補(bǔ)丁( padding )的內(nèi)容區(qū)域的左上角。如果只指定了一個(gè)值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為 50% 。如果指定了兩個(gè)值，第二個(gè)值將用于縱坐標(biāo)。如果設(shè)置值為 right center ，因?yàn)?right 作為橫坐標(biāo)值將會(huì)覆蓋 center 值，所以背景圖片將被居右定位。下面是一些等式
top left, left top 等價(jià)于 0% 0%.
top, top center, center top 等價(jià)于 50% 0%.
right top, top right 等價(jià)于 100% 0%.
left, left center, center left 等價(jià)于 0% 50%.
center, center center 等價(jià)于 50% 50%.
right, right center, center right 等價(jià)于 100% 50%.
bottom left, left bottom 等價(jià)于 0% 100%.
bottom, bottom center, center bottom 等價(jià)于 50% 100%.
bottom right, right bottom 等價(jià)于 100% 100%
三、JS代碼
本菜單是以jquery為基礎(chǔ)的所以首先必須引入jquery代碼庫(kù)，然后編寫如下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 開始*/
//為子菜單的最后一個(gè)li添加樣式，適合為li添加下劃線時(shí)去除最后一個(gè)的下劃線
$(".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)了一個(gè)通用的多級(jí)菜單，上面代碼是本人日常開發(fā)中的積累，由于本人水平有限可能存在著許多錯(cuò)誤希望同僚們批評(píng)指正或提出更優(yōu)化的代碼供本人參考，謝謝。
以上這篇通用無限極下拉菜單的實(shí)現(xiàn)代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程
經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
對(duì)于訂單，想必大家并不陌生吧，下為大家介紹下使用js實(shí)現(xiàn)的訂單，感興趣的朋友可以參考下2013-12-12
js點(diǎn)擊按鈕實(shí)現(xiàn)水波紋效果代碼（CSS3和Canves）
這篇文章主要為大家詳細(xì)介紹了點(diǎn)擊按鈕實(shí)現(xiàn)水波紋效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了JavaScript操作Cookie方法,實(shí)例分析了javascript針對(duì)cookie操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05
javascript 設(shè)計(jì)模式之享元模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之享元模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript 設(shè)計(jì)模式之享元模式相關(guān)概念、原理、應(yīng)用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
外部web端訪問微信小程序云數(shù)據(jù)庫(kù)的三種方法總結(jié)
最近在研究微信小程序的云開發(fā)功能,下面這篇文章主要給大家介紹了關(guān)于外部web端訪問微信小程序云數(shù)據(jù)庫(kù)的三種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
js報(bào)錯(cuò):Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關(guān)于js報(bào)錯(cuò)Maximum?call?stack?size?exceeded的解決方法,文中通過實(shí)例代碼將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在本篇文章里小編給大家整理的是關(guān)于js實(shí)現(xiàn)無限瀑布流實(shí)例方法以及相關(guān)代碼，需要的朋友們學(xué)習(xí)下吧。2019-09-09
淺析JavaScript定時(shí)器setTimeout的時(shí)延問題
這篇文章主要為大家詳細(xì)介紹了JavaScript中定時(shí)器setTimeout有最小時(shí)延的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
詳解JavaScript添加給定的標(biāo)簽選項(xiàng)
這篇文章給大家分享了JavaScript實(shí)現(xiàn)添加給定的標(biāo)簽選項(xiàng)的相關(guān)知識(shí)點(diǎn)內(nèi)容以及代碼實(shí)例，有興趣的朋友們參考下。2018-09-09