[JS作品]JS30系列26-Stripe Follow Along Nav

Post author:Steven玄
Post last modified:2020 年 12 月 9 日
Post category:FrontEnd / JavaScript / Software Engineering
Post comments:0 Comments

主題目標

本次的編程任務需要實現的效果是當鼠標懸停於導航按鈕時，顯示對應下拉菜單的內容。（說明：下拉菜單內容及白色背景已寫好，只需要根據需要改變其CSS屬性使元素顯示出來或改變其位置即可）。

作品網址：

Demo作品連結

JavaScript 30 作品目錄

處理步驟

先製作強調的外框 DOM 與下拉選單的內容，利用 CSS 中的 opacity 與 display 來隱藏，之後透過 JS 在移動至選單標題時，進行外框大小的變化與 CSS 的顯示

步驟一

取的所有標題元素，並建立移動到元素上與離開的觸發事件

  // 取的所有標題元素
  const triggers =document.querySelectorAll('.cool > li');


  /**
 * 移動到元素上的觸發事件
 */
function handleEnter(){

}
 /**
 * 離開元素的觸發事件
 */
 function handleLeave(){

 }

// 移動到元素上的觸發事件
 triggers.forEach(trigger => trigger.addEventListener('mouseenter', handleEnter));
// 移動到元素上的觸發事件
  triggers.forEach(trigger => trigger.addEventListener('mouseleave', handleLeave));

步驟二

透過增加 CSS 操作 open與移除open

  // 取的dropdownBackground元素
  const background =document.querySelector('.dropdownBackground');

  /**
 * 移動到元素上的觸發事件
 */
function handleEnter(){
  // 添加CSS class
this.classList.add('trigger-enter');
background.classList.add('open');

// 內容最後顯示
this.classList.add('trigger-enter-active');
}
 /**
 * 離開元素的觸發事件
 */
 function handleLeave(){
  //移除CSS class
  this.classList.remove('trigger-enter');
  background.classList.remove('open');
 }

步驟三

調整箭頭指向框位置與大小，使其符合下拉選單的內容

 // 取得指向框的位置
  const nav = document.querySelector('.top');


  /**
 * 移動到元素上的觸發事件
 */
function handleEnter(){
// 添加CSS class
this.classList.add('trigger-enter');
background.classList.add('open');
// 內容最後顯示
this.classList.add('trigger-enter-active');

// 取得下拉選單內容 DOM
const dropdown =this.querySelector('.dropdown');
// 取得位置資料
const dropdownCoords =dropdown.getBoundingClientRect();
// 取得nav位置資料
const navCoords = nav.getBoundingClientRect();


// 設定指向框大小為下拉選單大小 setProperty
background.style.setProperty('width', `${dropdownCoords.width}px`);
// 設定指向框大小為下拉選單大小 一般方式
background.style.height =`${dropdownCoords.height}px`;
// 移動指向框
background.style.setProperty('transform', `translate(${dropdownCoords.left - navCoords.left}px,${dropdownCoords.top - navCoords.top}px)`);

}

步驟四

內容顯示放最後，設定顯示時間，讓內容晚點出來，不會造成內容提早出來

// 內容最後顯示
//讓顯示相關文字時間往後推一點，避免資料先行出來，背景未跟到
setTimeout(() => this.classList.contains('trigger-enter') && this.classList.add('trigger-enter-active'), 150);