JavaScript實作HTML導航欄下拉選單[懸浮顯示]
前端界面進行設計時，我們會遇到滑鼠懸浮在某選項上，然后就會憑空顯示出選單出來，這種設計的確受到了很多人的青睞，其實純css也是可以實作的，但是會有一些限制，必須如要顯示的選單需要作為滑鼠懸浮元素的子元素，選擇器優先級等等，廢話不多說，直接看效果！
.
樣式有點丑，因為待會趕著時間去鍛煉哈哈哈，xdm看得懂就行了！
代碼實作（JavaScript）
1、獲取要懸浮的物件和選單物件
//獲取需要懸浮的物件
let show = document.getElementById("show");
//獲取被隱藏的選單
let menu = document.getElementById("menu");
2、對懸浮物件添加滑鼠懸浮事件
//給show添加滑鼠懸浮事件
show.onmouseover = function(){
//改變選單的行內樣式display為block，選單顯示
menu.style.display = "block";
}
3、對懸浮物件添加滑鼠離開事件
如果先觸發了懸浮物件show的滑鼠懸浮事件，不移動到選單menu上就滑鼠就離開了，會出現選單無法隱藏的bug！所以在懸浮物件的滑鼠離開事件中，我們需要進行判斷，如果滑鼠移開后的位置不在選單menu的范圍內，則令選單menu隱藏，否則就繼續顯示
show.onmouseout = function(){
//獲取選單欄的坐標值
let menux = menu.offsetLeft;
let menuy = menu.offsetTop;
let menuX = menu.offsetLeft+menu.offsetWidth;
let menuY = menu.offsetTop+menu.offsetHeight;
//獲取滑鼠的坐標值
let event = window.event;
let mouseX = event.clientX;
let mouseY = event.clientY;
if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){
menu.style.display = "none";
}
}
4、分別給選單menu添加滑鼠懸浮和離開事件
這里見碼之意，假如滑鼠在menu上就顯示，離開了就隱藏
//分別給menu物件系結滑鼠懸浮和滑鼠離開事件
menu.onmouseover = function(){
menu.style.display = "block";
}
menu.onmouseleave = function(){
menu.style.display = "none";
}
.
.
.
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
//獲取需要懸浮的物件
let show = document.getElementById("show");
//獲取被隱藏的選單
let menu = document.getElementById("menu");
//給show添加滑鼠懸浮事件
show.onmouseover = function(){
//改變選單的行內樣式display為block
menu.style.display = "block";
}
//
show.onmouseout = function(){
//獲取選單欄的坐標值
let menux = menu.offsetLeft;
let menuy = menu.offsetTop;
let menuX = menu.offsetLeft+menu.offsetWidth;
let menuY = menu.offsetTop+menu.offsetHeight;
//獲取滑鼠的坐標值
let event = window.event;
let mouseX = event.clientX;
let mouseY = event.clientY;
if(mouseX<menux || mouseX>menuX || mouseY<menuY || mouseY>menuY){
menu.style.display = "none";
}
}
//分別給menu物件系結滑鼠懸浮和滑鼠離開事件
menu.onmouseover = function(){
menu.style.display = "block";
}
menu.onmouseleave = function(){
menu.style.display = "none";
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#show {
margin-top: 10px;
margin-left: 10px;
width: 50px;
height: 30px;
border: 1px solid #ccc;
background-color: pink;
}
#menu{
display: none;
margin-left: 10px;
width: 50px;
border: 1px solid #ccc;
background: rgba(0, 0, 0, 0.6);
}
#menu a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="box">
<div id="show"><a href="#">Gorho</a></div>
<ul id="menu">
<li><a href="#">選項一</a></li>
<li><a href="#">選項二</a></li>
<li><a href="#">選項三</a></li>
</ul>
</div>
</body>
</html>
.
.
寫在最后：其實在作品中需要將選單menu設定成絕對定位，即position:absolute，否則選單出現后會擠壓其他盒子的位置，但筆者趕時間，就沒有設定，其實設定也很簡單，在css中加上就大功告成了！
第三篇文章，希望大家點贊收藏支持一下！我是Gorho，有空再見！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/227554.html
標籤：其他