JavaScript 三級導航選單
分享一段程式碼例項,利用原生JavaScript實現了三級下拉導航選單效果。
下面給出程式碼,並詳細介紹一下它的實現過程。
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } a { color: #fff; text-decoration: none; display: block; } #ul1 { width: 500px; font-size: 14px; color: #fff; line-height: 30px; text-align: center; margin: 0 auto; margin-top: 50px; } #ul1 li { display: inline-block; float: left; width: 98px; height: 30px; background: #f60; border: 1px solid #fff; } #ul1 li:hover { background: #666666; } #ul1 .ul2 { display: none; position: relative; width: 100px; } #ul1 .ul2 li { background: gold; position: relative; } #ul1 .ul2 li:hover { background: #F6F; } #ul1 .ul2 .ul3 li:hover { background: skyblue; } #ul1 .ul2 .ul3 li { background: seagreen; } #ul1 .ul2 .ul3 { position: absolute; left: 98px; top: 0px; display: none; width: 100px; height: 90px; } </style> <script> window.onload=function(){ var ul1 = document.getElementById("ul1"); var ul2 = document.getElementsByClassName("ul2"); var li1 = document.getElementsByClassName("li1"); var ul3 = document.getElementsByClassName("ul3"); var li2 = document.getElementsByClassName("li2"); //獲取二級選單 getItem(li1, ul2); //獲取三級選單 getItem(li2, ul3); } //顯示下拉選單 function getItem(obj, ul) { for (var index = 0; index < obj.length; index++) { obj[index].index = index; obj[index].onmouseover = function() { ul[this.index].style.display = "block"; } obj[index].onmouseout = function() { ul[this.index].style.display = "none"; } } } </script> </head> <body> <ul id="ul1"> <li class="li1"> <a href="##">一級導航1</a> <ul class="ul2"> <li class="li2"> <a href="##">二級導航1</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航2</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航3</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> </ul> </li> <li class="li1"> <a href="##">一級導航2</a> <ul class="ul2"> <li class="li2"> <a href="##">二級導航1</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航2</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航3</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> </ul> </li> <li class="li1"> <a href="##">一級導航3</a> <ul class="ul2"> <li class="li2"> <a href="##">二級導航1</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航2</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航3</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> </ul> </li> <li class="li1"> <a href="##">一級導航4</a> <ul class="ul2"> <li class="li2"> <a href="##">二級導航1</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航2</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航3</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> </ul> </li> <li class="li1"> <a href="##">一級導航5</a> <ul class="ul2"> <li class="li2"> <a href="##">二級導航1</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航2</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> <li class="li2"> <a href="##">二級導航3</a> <ul class="ul3"> <li class="li3"> <a href="##">三級導航1</a> </li> <li class="li3"> <a href="##">三級導航2</a> </li> <li class="li3"> <a href="##">三級導航3</a> </li> </ul> </li> </ul> </li> </ul> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},文件內容完全載入完畢再去執行函式中的程式碼。
(2).var ul1 = document.getElementById("ul1"),獲取指定id的元素物件。
(3).var ul2 = document.getElementsByClassName("ul2"),獲取具有指定樣式類的元素集合。
(4).function getItem(obj, ul) {},此函式可以實現多級導航選單效果,第一個子選單的父元素(這是一個li元素),第二個引數是子導航容器物件(這是一個ul元素)。
(5).for (var index = 0; index < obj.length),通過for迴圈批量註冊事件處理函式。
(6).obj[index].index = index,為當前索引的元素物件新增一個自定義屬性index,並賦值為當前索引值。
(7).obj[index].onmouseover = function() {
ul[this.index].style.display = "block";
},註冊onmouseover事件處理函式,也就是當時受不了懸浮於當前li元素之上時,子選單的ul元素就顯示。
(8).obj[index].onmouseout = function() {
ul[this.index].style.display = "none";
},當滑鼠離開的時候,子選單隱藏。
二.相關閱讀:
(1).document.getElementsByClassName()參閱document. getElementsByClassName()一章節。
(2).onmouseover事件參閱JavaScript mouseover 事件一章節。、
(3).onmouseout事件參閱JavaScript mouseout 事件一章節。
相關文章
- JavaScript二級導航選單JavaScript
- CSS垂直三級導航選單CSS
- jQuery三級導航選單詳解jQuery
- JavaScript橫向二級導航選單效果JavaScript
- CSS三級下拉導航選單詳解CSS
- JavaScript slide下拉導航選單效果JavaScriptIDE
- CSS多級導航選單效果CSS
- PbootCMS導航選單-導航選單的使用教程boot
- JavaScript可摺疊屬性導航選單JavaScript
- JavaScript下拉摺疊導航選單講解JavaScript
- jQuery 緩衝效果二級導航下拉選單jQuery
- 二級下拉導航選單製作詳解
- CSS垂直導航選單CSS
- CSS 動態導航選單CSS
- 導航選單(動畫)--- jQuery動畫jQuery
- JavaScript實現HTML導航欄下拉選單[懸浮顯示]JavaScriptHTML
- CSS導航欄及下拉選單CSS
- Element-ui之導航選單UI
- jquery-滑鼠經過導航條,顯示二級下拉選單jQuery
- 純css製作導航下拉選單CSS
- (四)選單導航及路由設定路由
- 固定在頂部的導航選單
- vue元件之路之menu導航選單Vue元件
- CSS導航條選單:帶小三角形CSS
- JavaScript 省市級聯選單原理JavaScript
- jQuery 淡入淡出效果下拉導航選單jQuery
- CSS3麵包屑導航選單CSSS3
- 純CSS打造淘寶導航選單欄CSS
- CSS3垂直摺疊導航選單CSSS3
- CSS水平導航選單製作詳解CSS
- CSS 水平導航選單製作詳解CSS
- CSS3橫向導航選單效果CSSS3
- 滑鼠懸浮緩慢下拉導航選單
- CSS 可伸縮圓角導航選單CSS
- elementui NavMenu導航選單預設展開UI
- 透明層滑動跟隨導航選單
- PbootCMS導航選單標籤的小技巧boot
- BootstrapBlazor實戰 Menu 導航選單使用(2)bootBlazor