JavaScript Examples Mouse Hover Menu

HTML

    <ul class="gnb">

      <li>

        <a href="">가축</a>

        <ul class="subgnb">

          <li><a href="">오리</a></li>

          <li><a href="">닭</a></li>

          <li><a href="">돼지</a></li>

        </ul>

      </li>

      <li>

        <a href="">마바사</a>

        <ul class="subgnb">

          <li><a href="">오리</a></li>

          <li><a href="">닭</a></li>

          <li><a href="">돼지</a></li>

        </ul>

      </li>

      <li>

        <a href="">아자차</a>

        <ul class="subgnb">

          <li><a href="">오리</a></li>

          <li><a href="">닭</a></li>

          <li><a href="">돼지</a></li>

        </ul>

      </li>

    </ul>

 

 

SCSS

.gnb {

  text-align: center;

  display: flex;

  justify-content: center;

  align-items: center;

  > li > a {

    height: 20px;

    display: flex;

    padding: 20px;

    border: 1px solid black;

    background-color: blue;

    color: white;

  }

  .subgnb {

    height: 0;

    overflow: hidden;

    > li > a {

      display: block;

      border: 1px solid black;

      padding: 20px;

    }

  }

  &.on {

    li > .subgnb {

      height: 100%;

    }

  }

}

 

 

JavaScript

const gnb = document.querySelector(".gnb");

const menu = document.querySelectorAll(".gnb > li");

for (let i = 0; i < menu.length; i++) {

  menu[i].addEventListener("mouseenter", function () {

    gnb.classList.add("on");

  });

  menu[i].addEventListener("mouseleave", function () {

    gnb.classList.remove("on");

  });

}

 

 

ON BROWSER