フリーランスの忘備録

// 変数・定数定義
const glnav = document.getElementById("glnav");
const navItems = document.getElementsByClassName("glnav-item");
const navLine = document.getElementById("nav-line");
let navLineInitLeft;
let navLineInitWidth;

// 関数定義
const initNavline = () => {
  const navCurrent = glnav.getElementsByClassName("current")[0];
  const navLeft = navCurrent.getBoundingClientRect().left
  const navWidth = navCurrent.clientWidth;
  navLine.style.left = `${navLeft}px`;
  navLine.style.width = `${navWidth}px`;
  navLineInitLeft = `${navLeft}px`;
  navLineInitWidth = `${navWidth}px`;
}

const navMouseOver = (target) =>{
  const left = target.getBoundingClientRect().left;
  const width = target.clientWidth;
  navLine.style.left = `${left}px`;
  navLine.style.width = `${width}px`;
}

const navMouseOut = () =>{
  navLine.style.left = navLineInitLeft;
  navLine.style.width = navLineInitWidth;
}


// 関数実行
initNavline();
for( let i = 0;i < navItems.length; i++ ){
  navItems[i].addEventListener("mouseover",(e)=>{
    navMouseOver(e.currentTarget);
  });
  navItems[i].addEventListener("mouseout",()=>{
    navMouseOut();
  });
}

window.addEventListener('resize', ()=>{
  initNavline();
});