[css]드랍다운 메뉴바 만들기

웹페이지에서 많이 쓰이는 드랍다운 메뉴바를 만들어보자

이런 메뉴바에서 각각의 메뉴를 클릭하면 아래와 같이 드랍다운되어 내려오는 메뉴바를 만들어보려고 한다.

먼저 목록태그인 ul,li를 사용하여 마크업을 진행하였다.

만드려는 구조가 메뉴안에 드롭다운으로 메뉴가 나와야하므로 ul>li 로 첫번째 메뉴의 구조를 잡고 li 태그에 class="depth1"이라고 설정하였다.

depth1의 <li>안에 드랍다운 메뉴바를 위해 ul>li 구조를 사용하였고 ul 태그에 class="depth2"라고 설정하였다.

<ul class="gnb cf">
      <li class="depth1">
        <a href="#">HOME</a>
        <ul class="depth2">
          <li><a href="#">HOME01</a></li>
          <li><a href="#">HOME02</a></li>
          <li><a href="#">HOME03</a></li>
          <li><a href="#">HOME04</a></li>
          <li><a href="#">HOME05</a></li>
        </ul>
      </li>
      <li class="depth1 cf">
        <a href="#">NEWS</a>
        <ul class="depth2">
          <li><a href="#">NEWS01</a></li>
          <li><a href="#">NEWS02</a></li>
          <li><a href="#">NEWS03</a></li>
          <li><a href="#">NEWS04</a></li>
          <li><a href="#">NEWS05</a></li>
        </ul>
      </li>
</ul>

css를 살펴보면 메뉴바 전체를 감싸고 있는 <ul>태그에 넓이와 높이를 주었고 여기에 position: relative; 속성을 사용한 이유는 depth2(드랍다운 메뉴바)가 이 전체 메뉴바의 위치를 기준으로 이동할것이기 때문이다.

목록태그들은 세로로 정렬되기 때문에 일자로 정렬되는 메뉴바를 만들기 위해 <li> depth1에 float:left 를 사용하였다.

드랍다운 메뉴바의 .depth2 클래스에 position: absolute; 속성을 사용하여 전체 메뉴바의 위치로부터 아래로 이동시켜준다. .depth2의 <li>도 목록이므로 float:left;를 이용하여 일렬로 정렬시켰다.

이 드랍다운 메뉴바는 평상시에는 보이지않고 .depth1의 메뉴에 :hover되었을때 나타나야하기때문에 display:none;을 사용하여 보이지 않게 설정하였다.

.gnb .depth1:hover > .depth2 { display: block; } -> 첫번째 메뉴바의 메뉴가 호버되었을때 depth2에 display: block; 을 사용하여 나타나게 설정하였다.

.gnb {
  width: 1400px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.gnb .depth1 {
  width: 200px;
  float: left;
  text-align: center;
}
.gnb .depth1 > a {
  font-weight: bold;
  font-size: 20px;
  display: block;
  height: 50px;
  line-height: 50px;
  background-color: #202020;
  color: #fff;
}
.gnb .depth1:hover > a {
  background-color: red;
}
.gnb .depth1:hover > .depth2 {
  display: block;
}
.gnb .depth2 {
  position: absolute;
  left: 0;
  top: 50px;
  width: 1400px;
  background-color: #d0d0d0;
  display: none;
}
.gnb .depth2 > li {
  float: left;
}
.gnb .depth2 > li > a {
  display: block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-size: 17px;
}
.gnb .depth2 > li > a:hover {
  background-color: #444;
  color: #fff;
}