221116 full_down

Skills/JavaScript

221116 full_down_lnb.html

개발자 윤구나 2022. 11. 16. 15:24

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery_full_down_lnb</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="./js/full_down.js"></script>
    <link rel="stylesheet" href="./css/full_down.css" />
  </head>
  <body>
    <div class="outer_header">
      <div class="inner_header">
        <header class="header">
          <ul class="lnb">
            <li class="m1">
              <a href="#">menu01</a>
              <ul>
                <li><a href="#">menu01-1</a></li>
                <li><a href="#">menu01-2</a></li>
                <li><a href="#">menu01-3</a></li>
                <li><a href="#">menu01-4</a></li>
              </ul>
            </li>
            <li class="m2">
              <a href="#">menu02</a>
              <ul>
                <li><a href="#">menu02-1</a></li>
                <li><a href="#">menu02-2</a></li>
                <li><a href="#">menu02-3</a></li>
                <li><a href="#">menu02-4</a></li>
              </ul>
            </li>
            <li class="m3">
              <a href="#">menu03</a>
              <ul>
                <li><a href="#">menu03-1</a></li>
                <li><a href="#">menu03-2</a></li>
                <li><a href="#">menu03-3</a></li>
                <li><a href="#">menu03-4</a></li>
              </ul>
            </li>
            <li class="m4">
              <a href="#">menu04</a>
              <ul>
                <li><a href="#">menu04-1</a></li>
                <li><a href="#">menu04-2</a></li>
                <li><a href="#">menu04-3</a></li>
                <li><a href="#">menu04-4</a></li>
              </ul>
            </li>
            <li class="m5">
              <a href="#">menu05</a>
              <ul>
                <li><a href="#">menu05-1</a></li>
                <li><a href="#">menu05-2</a></li>
                <li><a href="#">menu05-3</a></li>
                <li><a href="#">menu05-4</a></li>
              </ul>
            </li>
          </ul>
          <!--lnb-->
        </header>
      </div>
      <!--inner_header-->
    </div>
    <!--outer_header-->

    <div class="visual_main">visual_main</div>
  </body>
</html>

$(function () {
  const lnbLi = $(".lnb > li");
  const ul = $(".lnb > li > ul");
  const headerMin = $(".inner_header").height();
  const headerMax = headerMin + ul.innerHeight();
  let state = false;
  // state 외에 다른 단어를 써도 됨. 어떤 이벤트가 일어나서 상태 변화 했다면 이라는 뜻의 변수.

  lnbLi.mouseenter(function () {
    if (!state) {
      // 상태변화가 일어났다면 이라는 뜻
      $(".inner_header")
        .stop()
        .animate(
          {
            height: headerMax,
          },
          150,
          function () {
            ul.stop().fadeIn(150);
          }
        );
      state = true; // 브라우저에게 알려줘야함
    }

    $(this).find("ul").addClass("on");
  });

  lnbLi.mouseleave(function () {
    $(this).find("ul").removeClass("on");
  });

  $(".header").mouseleave(function () {
    ul.stop().fadeOut(150, function () {
      $(".inner_header").stop().animate(
        {
          height: headerMin,
        },
        150
      );
    });
    state = false; // 브라우저에게 알려줘야함
  });
});

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
}

.outer_header {
  width: 100%;
  height: 30px;
  position: relative;
}

.inner_header {
  width: 100%;
  height: 30px;
  background-color: white;
  border-bottom: 1px solid #333;
  position: absolute;
  top: 0;
  left: 0;
}

.header {
  width: 750px;
  margin: 0 auto;
}

.header .lnb {
  position: relative;
}

.header .lnb li {
  width: 150px;
  text-align: center;
  padding-bottom: 5px;
  float: left;
}

.header .lnb li ul {
  width: 140px;
  background-color: white;
  padding: 5px;
  position: absolute;
  top: 30px;
  left: 0;
  display: none;
}

.header .lnb li ul.on {
  background-color: #ccc;
}

.header .lnb li.m1 ul {
  left: 0;
}
.header .lnb li.m2 ul {
  left: 150px;
}
.header .lnb li.m3 ul {
  left: 300px;
}
.header .lnb li.m4 ul {
  left: 450px;
}
.header .lnb li.m5 ul {
  left: 600px;
}

.header .lnb li ul li a {
  display: block;
}

.header .lnb li li a:hover,
.header .lnb li li a:focus {
  color: red;
}

.visual_main {
  width: 100%;
  height: 300px;
  background-color: yellow;
  text-align: center;
  line-height: 300px;
}