Developer Su

느리지만 꾸준하게!!
매일 공부하는것을
목표로합니다

1 분 소요

홈페이지를 보다보면 무수히많은 menu들이있다. 그 중 포트폴리오를 만들면서 이해가 잘 되지않았던 menu bar에 대해서 공부하고자한다.

image

우선 내가 만들고자하는건 이 menu bar였다. 클론코딩을하면서도 menu bar부분은 이해가 안가서 듣기만 하고넘겼는데 이 포트폴리오를 만들면서 많은 홈페이지들이 menubar를 100이면 100사용하고있다고 해도 과언이 아니었고 여기에 대해서 로직을 필수적으로 이해해야한다고 느꼈다.

<!DOCTYPE html>
<html lang="en">
  <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" />
    <link rel="stylesheet" href="/style.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <ul class="menubar">
        <li class="item">
          <div class="item_name">COFFEE</div>
          <div class="content">
            <ul>
              <li>americano</li>
              <li>vanilla late</li>
              <li>hot amaricano</li>
            </ul>
          </div>
        </li>
        <li class="item">
          <div class="item_name">TEA</div>
          <div class="content">
            <ul>
              <li>yaza</li>
              <li>orange</li>
              <li>lemon</li>
            </ul>
          </div>
        </li>
        <li class="item">
          <div class="item_name">SHAKE</div>
          <div class="content">
            <ul>
              <li>milk</li>
              <li>vanilla</li>
              <li>choco</li>
            </ul>
          </div>
        </li>
      </ul>
    </header>
  </body>
</html>

.menubar {
  position: relative;
  display: flex;
}
.item_name {
  padding: 30px 24px 34px 20px;
}
.item {
  cursor: pointer;
  position: relative;
}

.content {
  position: absolute;
  display: none;
}
.content li {
  width: 350px;
  padding: 20px 80px 15px 20px;
  color: white;
}
.item:hover .content {
  display: block;
}
/*목록태그들 hover했을때 색상*/
.item:hover li {
  background-color: royalblue;
}
.item li:hover {
  color: black;
  transition: 0.5s;
}
ul {
  list-style: none;
}

output» image
위 코드들은 로직을 이해하고나서 만든 예제이다.

COFFEE TEA SHAKE에 mouseover를 하면 사진처럼 memubar가 펼쳐진다.

알기쉽게 필자가 노트에 정리하며 그려놓은것을 보면서 설명해나가겠다!

참고