[CSS] 메뉴 밑줄 슬라이드 CSS

안녕하세요. J4J입니다.

 

이번 포스팅은 메뉴 밑줄 슬라이드 CSS에 대해 적어보는 시간을 가져보려고 합니다.

 

 

 

메뉴 밑줄 슬라이드 - 1

 

여러 웹 사이트 및 앱을 보면 메뉴 바를 많이 확인할 수 있습니다.

 

그중 몇몇 사이트 및 앱에서는 메뉴 바를 클릭하거나 슬라이드를 하면 메뉴 밑줄이 함께 움직이는 CSS를 봤던 경험이 있었습니다.

 

해당 디자인도 한번 구현해보고 싶다는 생각을 가지고 있었기에 코드를 짜 보게 되었고 구현한 코드들을 공유하기 위해 글을 남깁니다.

 

 

 

가장 먼저 간단하게 메뉴를 클릭할 경우에만 밑줄 슬라이드가 되도록 구현해보면 다음과 같습니다. (모바일에서 정상 동작되지 않으신 분들은 Rerun을 한번 눌러주시길 바랍니다 ㅠㅠ)

 

See the Pen menu_underline_slide_1 by 김 성찬 (@ksccmp) on CodePen.

 

 

반응형

 

 

단순하게 메뉴를 클릭하면 화면이 슬라이드 되어 넘어가면서 동시에 메뉴 밑줄도 같이 슬라이드로 넘어가는 것을 확인할 수 있습니다.

 

 

 

메뉴 밑줄 슬라이드 - 2

 

단순히 메뉴 클릭으로만 슬라이드를 하면 진정한 슬라이드 아니라고 생각합니다.

 

PC에서는 클릭, 모바일에서는 터치를 할 때도 그에 맞는 반응을 보여줄 수 있게 수정해봤습니다.

 

HTML과 CSS는 유지하고 JS만 수정하여 변경해보면 다음과 같습니다. (모바일에서 정상 동작되지 않으신 분들은 Rerun을 한번 눌러주시길 바랍니다 ㅠㅠ)

 

See the Pen menu_underline_slide_2 by 김 성찬 (@ksccmp) on CodePen.

 

 

 

테스트를 해보면 첫 번째와 달리 PC에서는 클릭, 모바일에서는 터치를 할 때도 슬라이드 이동이 되는 것을 확인할 수 있습니다.

 

 

 

메뉴 밑줄 슬라이드 - 3

 

두 번째 슬라이드에서 아쉬운 점은 PC에서는 클릭, 모바일에서는 터치를 통해 슬라이드 이동을 할 때 메뉴 밑줄 슬라이드는 현재의 상태를 유지하다가 슬라이드 이동이 완료될 때만 움직인다는 것입니다.

 

메뉴 밑줄 슬라이드가 더 좋은 퍼포먼스를 보여주기 위해서는 메뉴 밑줄도 동시에 슬라이드가 이뤄져야 한다고 생각했고 이 부분도 두 번째 코드에서 JS만 조금 더 수정하여 다음과 같이 적용해봤습니다. (모바일에서 정상 동작되지 않으신 분들은 Rerun을 한번 눌러주시길 바랍니다 ㅠㅠ)

 

 

728x90

 

 

See the Pen menu_underline_slide_3 by 김 성찬 (@ksccmp) on CodePen.

 

 

 

테스트를 해보면 슬라이드와 함께 메뉴 밑줄도 동시에 슬라이드가 동작되는 것을 확인할 수 있습니다.

 

 

 

참조

 

YouTube - 코딩알려주는누나, 메뉴 밑줄 슬라이딩 애니메이션 만들기

 

 

 

 

 

 

 

 

 

이상으로 메뉴 밑줄 슬라이드 CSS에 대해 간단하게 알아보는 시간이었습니다.

 

읽어주셔서 감사합니다.