[웹디자인기능사]메뉴 구현하기

웹디자인 기능사 실기시험을 준비하면서 공부한 것들을 정리해보려고 한다.

---

<메뉴 모음>

가로메뉴

1. 가로메뉴 - 전체 드롭다운 메뉴

2. 가로메뉴 - 개별 드롭다운 메뉴

세로메뉴

3. 세로메뉴 - 개별 드롭다운 메뉴

4. 세로메뉴 - 오른쪽 TOP

5. 세로메뉴 - 오른쪽 개별

6. 세로메뉴 - 오른쪽 전체

---

<메인메뉴 효과>

메인메뉴에 mouseover시 하이라이트가 되고, mouseout되면 하이라이트가 사라져야 한다.
나는 아래 두가지 방법을 이용하여 작성해 보았다.

• main menu > li:hover시 a에 하이라이트 효과 주기

<!-- CSS -->
<style>
  .main-menu01 li:hover > a {
    background-color: blue;
    color: #fff;
  }
</style>

<!-- HTML -->
<ul class="main-menu01">
  <li>
    <a href="#none">menu1</a>
    <ul class="sub-menu01">
      <li><a href="#none">sub1-1</a></li>
      <li><a href="#none">sub1-2</a></li>
      <li><a href="#none">sub1-3</a></li>
      <li><a href="#none">sub1-4</a></li>
    </ul>
  </li>
  <li>
    <!-- 생략 -->
  </li>
</ul>

• 메인메뉴에 mouseover시 main menu > li > a에 클래스명을 부여하여 하이라이트 효과 주기

<!-- CSS -->
<style>
.main-menu01 > li > a.active {
  background-color: blue;
  color: #fff;
}
</style>

<!-- HTML -->
<ul class="main-menu01">
  <li>
    <a href="#none">menu1</a>
    <ul class="sub-menu01">
      <li><a href="#none">sub1-1</a></li>
      <li><a href="#none">sub1-2</a></li>
      <li><a href="#none">sub1-3</a></li>
      <li><a href="#none">sub1-4</a></li>
    </ul>
  </li>
  <li>
    <!-- 생략 -->
  </li>
</ul>

<!-- jQuery -->
<script>
  $(".main-menu01 > li").mouseover(function () {
  	//기존에 클래스명이 남아있을수도 있으므로 전부 삭제
    $(".main-menu01 > li > a").removeClass("active");
    //현재 mouseover한 li의 자식 a에게 active라는 클래스명을 부여함
    $(this).children("a").addClass("active");
  });

  $(".main-menu01 > li").mouseleave(function () {
  	//li에서 mouseleave되면 active라는 클래스명 삭제
    $(".main-menu01 > li > a").removeClass("active");
  });
</script>