JavaScript實現HTML導航欄下拉選單[懸浮顯示]

Gorho發表於2020-11-24
JavaScriptHTML

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，有空再見！

相關文章