javascript
css二级菜单会然下面遮住_JavaScript实现下拉二级菜单详解
下拉菜單最終效果如圖：
實現原理，通過絕對定位的方式，使下拉列表脫離文檔流。通過js或者css來控制鼠標移入后的效果
初始時可以改變
1.display：none;使其隱藏
2.height：0px;改變高度使其隱藏
-->加上下面代碼可以實現菜單的**上升下拉逐漸出現動畫效果**
transition: height 2s ease;3.opacity：0；改變透明度使其隱藏
-->加上下面代碼可以實現菜單的**漸隱漸顯動畫效果**
transition: opacity 2s ease;等等。。。
**以下步驟可以實現二級菜單上升下拉逐漸出現的動畫效果，上面其他兩種方式可自行嘗試**
第一步 寫html文檔，構建頁面的骨架。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入css --><link rel="stylesheet" href="index.css"><!-- 引入js --><script src="index.js" defer></script> </head> <body><div class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">中心簡介</a></li><li><a href="#">工作動態</a></li><li><a href="#">規章制度</a><ul><li><a href="#">首頁</a></li><li><a href="#">中心簡介</a></li><li><a href="#">工作動態</a></li></ul></li><li><a href="#">實驗平臺</a></li><li><a href="#">教學成果</a><ul><li><a href="#">首頁</a></li><li><a href="#">中心簡介</a></li><li><a href="#">工作動態</a></li></ul></li><li><a href="#">課程建設</a></li><li><a href="#">資源管理</a></li><li><a href="#">文案探討</a></li></ul></div> </body> </html>運行結果如圖：（引入JavaScript時加入defer，使其在html文檔加載完成后，在加載js代碼，因為代碼自上而下執行，避免先加載js，在js中獲取不到html元素的信息）
第二步 寫css樣式，文件名（index.css）css來控制樣式，使html變成大漂亮
代碼主要實現：
1、清除li標簽點的樣式
2、橫向布局，具體效果自定
3、使二級菜單絕對定位，相對于其父級元素
4、隱藏二級菜單，通過在文章開始說的三種基本方式。（以下是高度改變）
css代碼：
*{margin: 0;padding: 0; } li{list-style: none; } .nav{width: 80%;margin: 0 auto;background-color: red; } .nav>ul{display: flex;justify-content: space-between; } .nav>ul>li{width: 10%;text-align: center;position: relative; } .nav ul li{height: 43px;box-sizing: border-box; } .nav ul li a{text-decoration:none;color: aliceblue;/* 所有的a繼承父級的寬度 */display: block;padding: 10px 0; } .nav ul li a:hover{background-color: aqua;border-bottom: 4px solid blueviolet; } .nav>ul>li>ul{/* 動畫效果，當高度改變時，使其2s漸變 */transition: height 2s ease; background-color: red;width: 100%;height: 0;overflow: hidden;position: absolute;top:40px; }運行結果：可以看的非常漂亮（大紅色）十分顯眼
上述css中最關鍵的是：**給二級菜單絕對定位，給他父級相對定位**，并且height: 0;overflow: hidden;使其初始的時候隱藏(**overflow必須加**)
.nav>ul>li{position: relative; } .nav>ul>li>ul{height: 0;overflow: hidden;position: absolute;top:40px; }如果只使用css來完成下拉菜單，可以通過加hover的形式，使其要變的二級菜單，通過hover的形式，改變height: 132px;的形式也可以
第三步寫JavaScript文件(index.js),是上面下拉菜單有動態效果
代碼主要實現：
1、在js里獲取到一級菜單
2、寫一個for循環，給每個一級菜單加上移入移出動作
3、判斷當前移入的目標，改變高度顯示二級菜單，移出時，高度重新為0，使其消失
代碼如下：
var firstLi = document.querySelectorAll(".nav>ul>li"); // 通過循環給每個一級li標簽都綁定鼠標移入事件 for(var i=0;i<firstLi.length;i++){firstLi[i].onmouseover=function(){if(this.querySelector("ul")){// firstLi[i]已經不是當前的了，this是當前的var secUL=this.querySelector("ul");// 獲得當前二級菜單中的li標簽個數var liLength=secUL.querySelectorAll('li').length;secUL.style.height=44*liLength+'px';}}firstLi[i].onmouseout=function(){if(this.querySelector("ul")){// firstLi[i]已經不是當前的了，this是當前的var secUL=this.querySelector("ul");secUL.style.height='0px';}} }根據二級菜單個數，來改變高度，增加代碼健壯性，想加多個二級菜單時，不需要在修改js
最開始其他兩種方式也可以通過這種形式實現：只需要修改一點點代碼，就可以
~~筆者審美太低，樣式太丑可以自行修改。~~
總結
以上是生活随笔為你收集整理的css二级菜单会然下面遮住_JavaScript实现下拉二级菜单详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win7如何用模拟光驱安装(win7硬盘
- 下一篇： gradle idea java ssm