一個(gè)css與js結(jié)合的下拉菜單支持主流瀏覽器
首先聲明：
本人雖然在web前端崗位干了好多年，但無(wú)奈崗位對(duì)技術(shù)要求不高。html,css用的比較多，JavaScript自己原創(chuàng)的很少，基本都是copy修改，所以自己真正動(dòng)手寫(xiě)時(shí)，發(fā)現(xiàn)基礎(chǔ)很不牢固，邊學(xué)習(xí)邊實(shí)踐，收獲很大。
效果圖：
不廢話(huà)了，貼碼了
1、css代碼
a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px 0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}
2、JavaScript代碼
<script language=javascript>
function menu(menu1){
//鼠標(biāo)移入移出classname切換和子菜單隱藏、顯示切換。
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1);
if (menu_ul.getElementsByTagName("li").length){
var menu_li=menu_ul.getElementsByTagName("li");
for (i in menu_li){
menu_li[i].onmouseover=function(){this.className="limouseover";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="block";}}
menu_li[i].onmouseout=function(){this.className="limouseout";if (this.getElementsByTagName("ul").length){this.getElementsByTagName("ul")[0].style.display="none";}}
}
}
}
}
</script>
3、html代碼
<ul id=menu1>
<li><a href="">首頁(yè)</a></li>
<li><a href="">菜單1菜單1</a>
<ul>
<li><a href="">子菜單1子菜單1子菜單1子菜單1</a></li>
<li><a href="">子菜單2</a></li>
</ul>
</li>
<li><a href="">菜單2</a>
<ul>
<li><a href="">子菜單1子菜單1子菜單1子菜單1</a></li>
<li><a href="">子菜單2</a></li>
</ul>
</li>
</ul>
<script>var menu1=new menu("menu1");</script>
說(shuō)明：
1、考慮到ul和li頁(yè)面用的比較多，可以在css前加入#menu1，以對(duì)菜單樣式進(jìn)行范圍限制。
2、js主要是對(duì)鼠標(biāo)移入和移除事件進(jìn)行了偵聽(tīng)，對(duì)應(yīng)切換到limouseover和limouseout樣式；同時(shí)對(duì)子菜單的display屬性進(jìn)行更改，達(dá)到顯示隱藏的功能。
3、同一個(gè)頁(yè)面可以重復(fù)調(diào)用，不沖突，html代碼中的JavaScript代碼是調(diào)用實(shí)例，前面的menu1為任意變量名，括號(hào)內(nèi)的menu1為html頁(yè)面中的id。
本例的缺點(diǎn)：
1、菜單li的mouseover、mouseout和子菜單li的樣式一樣，即同一個(gè)顏色和字體，沒(méi)有實(shí)現(xiàn)單獨(dú)設(shè)置。
2、由于要兼容Ie6和ie7，所以其中采用position:absolute的同時(shí)，增加了left和top屬性，top要根據(jù)菜單li的整體高度設(shè)定。
相關(guān)文章
Javascript的setTimeout()使用閉包特性時(shí)需要注意的問(wèn)題
這篇文章主要介紹了Javascript的setTimeout(0)使用閉包特性時(shí)需要注意的問(wèn)題,需要的朋友可以參考下2014-09-09
Node.js是一套用來(lái)編寫(xiě)高性能網(wǎng)絡(luò)服務(wù)器的JavaScript工具包，一系列的變化由此開(kāi)始。比較獨(dú)特的是，Node.js會(huì)假設(shè)你是在POSIX環(huán)境下運(yùn)行它Linux 或 Mac OS X2012-03-03
這篇文章主要介紹了JS如何根據(jù)當(dāng)前日期獲取一周所有日期,文中通過(guò)實(shí)例代碼補(bǔ)充介紹了js獲取當(dāng)前一周的時(shí)間,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了JavaScript的節(jié)流與防抖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
JS promise解決異步問(wèn)題過(guò)程詳解
Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise是一個(gè)對(duì)象，從它可以獲取異步操作的消息2023-04-04
JavaScript實(shí)現(xiàn)數(shù)組對(duì)象轉(zhuǎn)換為鍵值對(duì)的四種方式
本文探討了將包含 {icon: "abc", url: "123"} 形式對(duì)象的數(shù)組轉(zhuǎn)換為鍵值對(duì)形式的四種方法,并從實(shí)現(xiàn)方式的簡(jiǎn)潔性、可讀性和性能角度進(jìn)行了分析比較,感興趣的朋友可以參考下2024-02-02
簡(jiǎn)單獲取鍵盤(pán)的KeyCode...2006-09-09
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)顯示和隱藏某個(gè)控件功能,涉及微信小程序事件響應(yīng)及樣式動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12
js檢查頁(yè)面上有無(wú)重復(fù)id的實(shí)現(xiàn)代碼
有時(shí)候我們需要檢查一個(gè)頁(yè)面上是否用重復(fù)的id，一般id都是唯一的，也方便控制，那么就可以參考下面的代碼2013-07-07