아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (197)
    • Web (144)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (4)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라

R 스토리

IT/UI | UX

[UI] 헤더 nav 언더라인 따라다니기

2020. 8. 20. 15:12
let bar = document.querySelector('span');
let menu = document.querySelectorAll('a');
for(let i=0; i<menu.length; i++){
  menu[i].addEventListener('mouseenter',function(e){
    let pos = e.currentTarget.offsetLeft;
    bar.style.opacity = "1";
    bar.style.left = pos + "px"
  })
}
document.querySelector('div').addEventListener('mouseleave',function(e){
	bar.style.opacity = "0";
});

 

 

<div>
  <a href="#">메뉴1</a>
  <a href="#">메뉴2</a>
  <a href="#">메뉴3</a>
  <a href="#">메뉴4</a>
  <span></span>
</div>

 

 

마우스 움직일때마다 언더라인 따라다니게..

 

 

 

 

728x90
저작자표시 비영리 (새창열림)

'IT > UI | UX' 카테고리의 다른 글

[UI] setTimeout과 clearTimeout 활용  (0) 2020.08.24
[UI] 제이쿼리 UI 사용해서 직소퍼즐 만들기  (0) 2020.08.24
[UI]오픈 날짜에 맞춰서 배너 show하기  (0) 2020.07.28
[Swiper] 스와이퍼 업데이트  (0) 2020.05.19
[제플린] 퍼블리셔가 제플린 사용하기  (9) 2019.11.27

티스토리툴바