[CSS] hover시 영문메뉴명 국문으로 변경하기

오늘은 앞서 만들었던 메뉴에 호버하면 1depth가 영문이였던걸 국문으로 변경시키는 효과를 넣어볼게요!

코드는 앞 게시물에서 사용했던 코드 그대로 사용하겠습니다.⤵
[Javascript] 슬라이드 효과 | 네비게이션(nav)에 적용하기 - slideUP(), slideDown()

🖥 기존 코드

HTML

<header id="headerWrap">
  <nav id="gnbWrap">
    <ul class="gnb">
      <li>
        <a href="">menu1</a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="">menu2</a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
	  <li>
        <a href="">menu3</a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>

CSS

* { box-sizing: border-box; }
a { text-decoration: none; }
#headerWrap { position: absolute; width: 100%; height: 110px; background-color: #000; }
#gnbWrap { height: 100%; }
#gnbWrap ul { display: flex; align-items: center; justify-content: space-around; height: 100%; }
#gnbWrap .gnb > li { width: 20%; height: 110px; text-align: center; }
#gnbWrap .gnb > li > a { display: block; font-size: 20px; font-weight: 600; color: #fff; padding: 43px 10px; }
.sub-wrap { position: absolute; top: 110px; left: 0; width: 100%; background-color: #111; overflow: hidden; opacity: 0; position: absolute; top: 110px; left: 0; width: 100%; background-color: #111; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; height: 0 }
.sub-wrap.active { opacity: 1; height: 60px; }
.sub-wrap > ul { max-width: 900px; width: 100%; margin: 0 auto; }
.sub-wrap > ul > li > a { display: block; padding: 21px 12px; color: #fff; font-size: 18px; font-weight: bold; opacity: .5; transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; }
.sub-wrap > ul > li > a:hover { opacity: 1; }

JavaScript

const gnbLi = document.querySelectorAll('.gnb > li');
const subMenu = document.querySelectorAll('.sub-wrap');

for(let i = 0; i < gnbLi.length; i++){
	gnbLi[i].addEventListener('mouseover', function() {
		subMenu[i].classList.add('active');
	});
}

for(let i = 0; i < gnbLi.length; i++){
	gnbLi[i].addEventListener('mouseleave', function() {
		subMenu[i].classList.remove('active')
	});
}

✨결과물

📌 hover시 메뉴명 변경하기

🖥 추가 코드

여기서 이제 추가해 보겠습니다!
우선 국문으로 변경해야 하니까 추가 텍스트가 필요하겠죠?

HTML

<header id="headerWrap">
  <nav id="gnbWrap">
    <ul class="gnb">
      <li>
        <a href="">
          <span>메뉴1</span> <!-- hover시 보여줄 메뉴명 -->
          <span>menu1</span>
        </a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="">
          <span>메뉴2</span> <!-- hover시 보여줄 메뉴명 -->
          <span>menu2</span>
        </a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
	  <li>
        <a href="">
          <span>메뉴3</span> <!-- hover시 보여줄 메뉴명 -->
          <span>menu3</span>
        </a>
        <div class="sub-wrap">
          <ul>
            <li><a href="">sub-menu1</a></li>
            <li><a href="">sub-menu2</a></li>
            <li><a href="">sub-menu3</a></li>
            <li><a href="">sub-menu4</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>

기존 1depth 자리에 변경시킬 텍스트를 추가로 넣었습니다!

CSS

/* position: relative; 추가 */
#gnbWrap .gnb > li > a { position: relative; display: block; font-size: 20px; font-weight: 600; color: #fff; padding: 43px 10px; }

/* 필요시 추가 커스텀 가능
#gnbWrap .gnb > li > a > span { white-space: nowrap; transition: opacity 0.2s; }
*/
#gnbWrap .gnb > li > a > span:first-child { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#gnbWrap .gnb > li > a:hover > span:first-child { opacity: 1; }
#gnbWrap .gnb > li > a:hover > span:last-child { opacity: 0; }

hover했을때 나타나야 하니까 국문 텍스트는 opacity 으로 숨겨줍시다!
그리고 hover하면 국문 텍스트는 opacity 1로, 영문텍스트는 0으로 주면 끝!

✨결과

간단하게 만들어 보았습니다~~👏