Stripe Follow Along Dropdown


Posted by wayne201299 on 2023-10-04

滑鼠移到導覽列就出現下拉選單

  • 選單會隨著滑鼠移動位置變化,所以可能需要監測目前選擇的element相對位置
  • 選單大小也是依照內容作變化

實作

  1. 一開始需要將所有nav下所有ul下的li標籤都做選取,並監測他們的滑鼠移入移出事件

     const triggers = document.querySelectorAll(".cool > li");
     const background = document.querySelector(".dropdownBackground");
     const nav = document.querySelector("nav");
    
     triggers.forEach((trigger) => {
         trigger.addEventListener("mouseenter", handleEnter);
         trigger.addEventListener("mouseleave", handleLeave);
     });
    
  2. 滑鼠移入時,計算相對位置及背景大小,在element上添加觸發的class

         this.classList.add("trigger-enter");
         setTimeout(
             () =>
                 this.classList.contains("trigger-enter") &&
                 this.classList.add("trigger-enter-active"),
             150
         );
         background.classList.add("open");
    
         const dropdown = this.querySelector(".dropdown");
         const dropdownCoords = dropdown.getBoundingClientRect();
         const navCoords = nav.getBoundingClientRect();
    
         const coord = {
             width: dropdownCoords.width,
             height: dropdownCoords.height,
             top: dropdownCoords.top - navCoords.top,
             left: dropdownCoords.left - navCoords.left,
         };
         background.style.setProperty("width", `${coord.width}px`);
         background.style.setProperty("height", `${coord.height}px`);
         background.style.setProperty(
             "transform",
             `translate(${coord.left}px, ${coord.top}px)`
         );
    
  3. 滑鼠離開時則移除class

     function handleLeave() {
         this.classList.remove("trigger-enter", "trigger-enter-active");
         background.classList.remove("open");
     }
    

知識點

  • 在 CSS 中,> 符號表示子選擇器(child selector)。當你使用 > 符號,它會選擇指定元素的直接子元素,而不包括孫子元素或更深層次的後代元素。

總結

  • 學習如何利用相對位置來動態顯示element

#javascript #css







Related Posts

關於 JavaScript Date - 做一個倒數頁面

關於 JavaScript Date - 做一個倒數頁面

漂亮的terminal

漂亮的terminal

[筆記]TCL 01 -初學者

[筆記]TCL 01 -初學者


Comments