一個css與js結(jié)合的下拉菜單支持主流瀏覽器
更新時間：2014年10月08日 17:18:36 投稿：whsnow
這是一個css和js結(jié)合的下拉菜單，經(jīng)測試支持主流瀏覽器，比較適合企業(yè)站，需要的朋友可以參考下
首先聲明：
本人雖然在web前端崗位干了好多年，但無奈崗位對技術(shù)要求不高。html,css用的比較多，JavaScript自己原創(chuàng)的很少，基本都是copy修改，所以自己真正動手寫時，發(fā)現(xiàn)基礎(chǔ)很不牢固，邊學(xué)習(xí)邊實踐，收獲很大。
效果圖：
不廢話了，貼碼了
1、css代碼
復(fù)制代碼 代碼如下:
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代碼
復(fù)制代碼 代碼如下:
<script language=javascript>
function menu(menu1){
//鼠標移入移出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代碼
復(fù)制代碼 代碼如下:
<ul id=menu1>
<li><a href="">首頁</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>
說明：
1、考慮到ul和li頁面用的比較多，可以在css前加入#menu1，以對菜單樣式進行范圍限制。
2、js主要是對鼠標移入和移除事件進行了偵聽，對應(yīng)切換到limouseover和limouseout樣式；同時對子菜單的display屬性進行更改，達到顯示隱藏的功能。
3、同一個頁面可以重復(fù)調(diào)用，不沖突，html代碼中的JavaScript代碼是調(diào)用實例，前面的menu1為任意變量名，括號內(nèi)的menu1為html頁面中的id。
本例的缺點：
1、菜單li的mouseover、mouseout和子菜單li的樣式一樣，即同一個顏色和字體，沒有實現(xiàn)單獨設(shè)置。
2、由于要兼容Ie6和ie7，所以其中采用position:absolute的同時，增加了left和top屬性，top要根據(jù)菜單li的整體高度設(shè)定。
相關(guān)文章
屏蔽右鍵在某些特殊的情況下還是比較有用的，下面與大家分享個常用的屏蔽方法2014-05-05
這篇文章主要為大家詳細介紹了使用JavaScript動態(tài)顯示文本，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了JS常用表單驗證方法,需要的朋友可以參考下2014-05-05
本文主要介紹了JavaScript實現(xiàn)分頁效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
下面小編就為大家?guī)硪黄钊肜斫鈐s promise chain。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
出門在外，沒有核酸證明寸步難行，此文將教你如何通過小程序制作一個工具幫你在人生地不熟的情況如何迅速找到核酸檢測點，實現(xiàn)核酸點查詢、地圖導(dǎo)航、撥號等功能，需要的朋友可以參考下2022-10-10
利用函數(shù)的惰性載入提高javascript代碼執(zhí)行效率
在 addEvent 函數(shù)每次調(diào)用的時候都要走一遍，如果瀏覽器支持其中的一種方法，那么他就會一直支持了，就沒有必要再進行其他分支的檢測了2014-05-05
JavaScript驗證18位身份證號碼最后一位正確性的實現(xiàn)代碼
這篇文章主要介紹了JavaScript驗證18位身份證號碼最后一位正確性的實現(xiàn)代碼,小編親測有效,需要的朋友可以參考下2014-08-08
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實例形式詳細分析了寄生組合式繼承原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2018-01-01