[html&css] 메뉴 hover시 밑줄 트랜지션 a태그 display:block; after활용

 

 

메뉴 텍스트에 마우스를 over 했을 때 밑줄이 있길 바라는 작업지시서를 받았습니다. hover 밑줄 이펙트는 검색하면 어디에든 많이 나오긴 합니다. 찬찬히 둘러보면서 어느 위치에 어떤 속성을 줄지 찾고 적용해보는 것이 가장 어려운 것 같습니다. 카페 24 솔루션을 사용하기 때문에 기존의 소스에 수정을 가하느라 적절한 위치를 찾는데 오래 걸렸지만 이것을 최대한 간소화 해보니 복잡할것이 없었습니다.

작업 당시에는 a태그 안의 요소들의 크기로만 보이는 밑줄에 여기 저기 속성의 위치를 옮겨보며 허둥댔지만, 카페 24의 불필요한 div들을 간소화하다 보니 확실히 눈에 보이는 것이 있었습니다. 요컨대 복잡하게 div의 위치를 찾을 것이 아니라 밑줄의 가로 크기가 a 태그 안의 요소 크기보다 크거나 작게 정해진 만큼 주고 싶다면 해당 a 태그에 display:block; 속성을 주면서 블록처럼 사용하고 고정될 밑줄 사이즈인 width를 명확히 주면 된다는 것. 물론 after hover, 트랜지션 등 필요한 속성들과 함께 말입니다.

 

See the Pen category hover by kindkimyoung (@kindkimyoung) on CodePen.

 

html구조는 간단합니다.

menu class div만을 사용했습니다.

<div class="menu">
  <ul>                
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">CD</a></li>
      <li><a href="#">EFG</a></li>
      <li><a href="#">HIJK</a></li>
   </ul>
</div>

 

class들은 디자인적 요소가 아니면 정말 간단하니 꼭 적용해보시기 바랍니다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200&display=swap');

.menu{
   font-size: 16pt;
   text-align: center;/*중앙정렬*/
   background: #00b3d3;
   padding: 20px 0 20px 0;
}
.menu li {
  display: inline-block;/*여백 없이 좌측으로 붙은 li*/
  padding: 0 40px 0 0;
}
.menu a{
   font-family:'Noto Serif KR', serif;/*폰트*/
   color: #fff;/*폰트컬러*/
   font-weight: 200;/*폰트굵기*/
   text-decoration: none;/*a href 밑줄 등 글자 꾸밈 없음*/
   line-height: 40px;
}
.menu a:after {/*after 가상요소*/
   display:block;/*a요소를 블록 요소라고 선언*/
   width:70px;/*카테고리 메뉴 밑줄의 크기를 동일하게 주기 위해 width 설정*/
              /*혹시 a요소 크기만큼 생기길 바란다면 width 삭제*/
   content: '';/*comtent안은 밑줄 디자인을 위해 비워두세요.*/
   border-bottom: solid 2px #fff;
   transform: scaleX(0);/*크기를 0으로 줌으로써 평상시엔 밑줄 없음*/
   transition: transform 250ms ease-in-out; /*변형 방식*/
}
.menu a:hover:after {
   transform: scaleX(1);/*a 속성에 hover시 after를 기존 크기로 변경*/
}

 

우선 menu div에 중앙 정렬 및 메뉴 바의 사이즈를 정해 줄 padding 값과 배경 색상을 줍니다. 그리고 나서 menu div의 li에 display: inline-block; 속성을 주어 li들이 여백 없이 좌측으로 자동 정렬되게 하였습니다. 그런 다음 menu div의 a에 폰트와 폰트 컬러 등 디자인 적 요소를 주었습니다. 그리고 밑줄 주기에서 가장 중요한 포인트인 menu div a 속성의 after 가상 요소. 그 안에, a 속성은 블록 요소라고 선언을 주고, 메뉴의 밑줄의 가로 크기가 동일하기 위해 width를 명확하게 주고,  border-bottom으로 밑줄의 디자인적 요소를 주었습니다.
transform: scaleX(0); 크기를 0으로 줌으로써 평상시엔 밑줄이 없도록 하고, transition: transform 250ms ease-in-out; 트랜지션은 서서히 감속되는 방식으로 설정하였습니다. 이 것들은 평상시엔 가만히 있다가, menu div의 a 태그에 마우스 over 하면 (hover:after) 스케일이 1이 됩니다. 

 

 

display요소와 after 가상요소 그리고 이 속성들을 넣을 적절한 위치가 포인트라고 할 수 있겠습니다. 코드펜과 다른 페이지도 함께 참고해주시면 훨씬 이해가 수월할 겁니다. 오늘도 도움이 되셨다면 좋겠습니다.