利用JS在HTML頁面中添加一個(gè)導(dǎo)航欄下拉菜單

發(fā)布時(shí)間：2020-11-25 14:13:36 來源：億速云閱讀：269 作者：Leah 欄目：開發(fā)技術(shù)

本篇文章為大家展示了利用JS在HTML頁面中添加一個(gè)導(dǎo)航欄下拉菜單，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

代碼實(shí)現(xiàn)（JavaScript）

1、獲取要懸浮的對(duì)象和菜單對(duì)象

//獲取需要懸浮的對(duì)象
  let show = document.getElementById("show");
  //獲取被隱藏的菜單
  let menu = document.getElementById("menu");

2、對(duì)懸浮對(duì)象添加鼠標(biāo)懸浮事件

//給show添加鼠標(biāo)懸浮事件
  show.onmouseover = function(){
     //改變菜單的內(nèi)聯(lián)樣式display為block，菜單顯示
     menu.style.display = "block";
  }

3、對(duì)懸浮對(duì)象添加鼠標(biāo)離開事件

如果先觸發(fā)了懸浮對(duì)象show的鼠標(biāo)懸浮事件，不移動(dòng)到菜單menu上就鼠標(biāo)就離開了，會(huì)出現(xiàn)菜單無法隱藏的bug！所以在懸浮對(duì)象的鼠標(biāo)離開事件中，我們需要進(jìn)行判斷，如果鼠標(biāo)移開后的位置不在菜單menu的范圍內(nèi)，則令菜單menu隱藏，否則就繼續(xù)顯示

show.onmouseout = function(){
   //獲取菜單欄的坐標(biāo)值
   let menux = menu.offsetLeft;
   let menuy = menu.offsetTop;
   let menuX = menu.offsetLeft+menu.offsetWidth;
   let menuY = menu.offsetTop+menu.offsetHeight;

   //獲取鼠標(biāo)的坐標(biāo)值
   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添加鼠標(biāo)懸浮和離開事件

這里見碼之意，假如鼠標(biāo)在menu上就顯示，離開了就隱藏

//分別給menu對(duì)象綁定鼠標(biāo)懸浮和鼠標(biāo)離開事件
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(){
      //獲取需要懸浮的對(duì)象
      let show = document.getElementById("show");
      //獲取被隱藏的菜單
      let menu = document.getElementById("menu");

      //給show添加鼠標(biāo)懸浮事件
      show.onmouseover = function(){
        //改變菜單的內(nèi)聯(lián)樣式display為block
        menu.style.display = "block";
      }

      //
      show.onmouseout = function(){
        //獲取菜單欄的坐標(biāo)值
        let menux = menu.offsetLeft;
        let menuy = menu.offsetTop;
        let menuX = menu.offsetLeft+menu.offsetWidth;
        let menuY = menu.offsetTop+menu.offsetHeight;

        //獲取鼠標(biāo)的坐標(biāo)值
        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對(duì)象綁定鼠標(biāo)懸浮和鼠標(biāo)離開事件
      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="#">選項(xiàng)一</a></li>
      <li><a href="#">選項(xiàng)二</a></li>
      <li><a href="#">選項(xiàng)三</a></li>
    </ul>
  </div>
</body>
</html>

上述內(nèi)容就是利用JS在HTML頁面中添加一個(gè)導(dǎo)航欄下拉菜單，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

利用JS在HTML頁面中添加一個(gè)導(dǎo)航欄下拉菜單

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽