javascript實現控制的多級下拉菜單
更新時間：2015年07月05日 11:22:46 投稿：hebedich
這篇文章主要介紹了javascript實現控制的多級下拉菜單，包含示例代碼，效果非常不錯，這里推薦給大家。
最近身體不適，所以沒能如期的更新，抱歉。這里直接把代碼貼上，如果有不明白的地方，留言就行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>下拉菜單</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
<style type="text/css">
.navi ul {
padding: 0;
list-style-type: none;
}
.navi ul li {
text-align: center;
float: left;
position: relative;
width: 200px;
background-color: #0F8CFF;
}
a {
color: #086808;
text-decoration: none;
}
.navi ul li a {
display: block;
border: 1px solid #fff;
}
.navi ul li ul {
display: none;
left: 0;
}
.navi ul li ul li ul{
position: absolute;
left:200px;
top: 0;
}
.navi ul li:hover ul a {
color: yellow;
}
</style>
<script type="text/javascript">
function showNextMenu(obj){
var nextMenu = obj.getElementsByTagName("ul")[0];
nextMenu.style.display = "block";
}
function hideNextMenu(obj){
var nextMenu = obj.getElementsByTagName("ul")[0];
nextMenu.style.display = "none";
}
</script>
</head>
<body>
<div class="navi">
<ul >
<li class="li_1" onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
<a href="javascript:;" >游戲</a>
<ul>
<li onmousemove="showNextMenu(this);" onmouseout="hideNextMenu(this);">
<a href="javascript:;" >傳奇</a>
<ul>
<li>
<a href="javascript:;" >1</a>
</li>
<li>
<a href="javascript:;" >2</a>
</li>
<li>
<a href="javascript:;" >3</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;" >傳奇</a>
</li>
<li>
<a href="javascript:;" >傳奇</a>
</li>
<li>
<a href="javascript:;" >傳奇</a>
</li>
<li>
<a href="javascript:;" >傳奇</a>
</li>
</ul>
</li>
<li class="li_1">
<a href="javascript:;" >游戲</a>
<ul>
<li>
<a href="javascript:;" >傳奇</a>
</li>
</ul>
</li>
<li class="li_1">
<a href="javascript:;" >游戲</a>
<ul>
<li>
<a href="javascript:;" >傳奇</a>
</li>
</ul>
</li>
<li class="li_1">
<a href="javascript:;" >游戲</a>
<ul>
<li>
<a href="javascript:;" >傳奇</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
效果圖如下：
以上所述就是本文的全部內容了，希望大家能夠喜歡。
您可能感興趣的文章:
- Javascript動態(tài)伸縮+淡出淡入
- JavaScript 下拉菜單實現代碼
- 通用的二級菜單代碼(css+javascript)
- javascript 靜態(tài)樹菜單實現代碼
- javascript仿qq界面的折疊菜單實現代碼
- javascript改變position值實現菜單滾動至頂部后固定
- javascript 樹形導航菜單實例代碼
- JavaScript伸縮的菜單簡單示例
- 深入探討JavaScript、JQuery屏蔽網頁鼠標右鍵菜單及禁止選擇復制
- javascript實現樹形菜單的方法
- javascript手風琴下拉菜單實現代碼
- javascript伸縮菜單欄實現代碼分享
- javascript伸縮型菜單實現代碼
相關文章
模板淘寶首頁的分類列表效果，17173的游戲分類效果也不錯。2009-04-04
本文主要介紹在uniapp中頁面與webview組件內頁面的雙向通信問題,本文通過圖文實例代碼相結合給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
JavaScript實現DIV層拖動及動態(tài)增加新層的方法
這篇文章主要介紹了JavaScript實現DIV層拖動及動態(tài)增加新層的方法,設計javascript操作div層的拖動與增加的相關技巧,需要的朋友可以參考下2015-05-05
這篇文章主要給大家總結介紹了關于javascript中的一些奇葩的日期換算方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
本文介紹了如何在微信小程序中使用TDesign組件庫,包括初始化項目、安裝組件庫、配置項目文件、構建npm以及使用組件等步驟,感興趣的朋友跟隨小編一起看看吧2025-01-01
如何更改js的alert樣式如：彈出對話框時的背景顏色、背景透明等等，下面有效果圖，感興趣的朋友可以學習下2014-01-01
本篇文章主要介紹了webpack源碼之loader機制詳解，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家詳細介紹了微信小程序之電影影評小程序制作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了JavaScript 數組，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了快速使用Bootstrap搭建傳送帶的相關資料,非常具有參考借鑒價值，需要的朋友可以參考下2016-05-05