1. HTML 작성

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="dropdown">
    <button class="dropdown-btn">Real Estate Type</button>
    <div class="dropdown-submenu">
      <a href="#none">All</a>
      <a href="#none">One Room</a>
      <a href="#none">1.5 Rooms</a>
      <a href="#none">Two Room</a>
      <a href="#none">Three Room</a>
      <a href="#none">Officetel</a>
      <a href="#none">Apartment</a>
    </div>
  </div>

</body>

</html>

기본적인 계층 구조는 다음과 같습니다.

└ div .dropdown
	├ button .dropdown-btn
    └ div dropdown-submenu
    	├ a
        ├ a
        ├ a
        ├ a
        ├ a
        ├ a
        └ a

전체를 감싸는 div를 만들어주고, 드롭다운에 사용할 버튼, 그리고 그 버튼에 의해 표시될 내용을 작성해줍니다.

2. CSS 작성

2-1. 전체 공통 디자인

body {
  font-family: "Raleway", sans-serif;
  line-height: 1.5em;
  color: #222;
}

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

바디에 쓰일 폰트를 지정하고 줄간격도 넓혀줍니다.

a 태그는 body에서 지정한 스타일이 적용이 되지 않기에 따로 지정해줍니다.

2-2. dropdown 버튼 태그

.dropdown {
  width: 250px;
}
.dropdown-btn {
  width: inherit;
  padding: 10px;
  font-size: 18px;
  background-color: yellowgreen;
  color: #fff;
  border: none;
  outline: none;
  cursor: pointer;
}

먼저 전체 사이즈를 지정해줍니다.

이후 버튼은 전체 사이즈에 따라 너비를 지정하고 색상을 부여합니다. 조금 더 가시성 있게 cursor는 pointer로 지정합니다.

2-3. 서브메뉴

버튼에 커서를 놓으면 생길 서브메뉴를 설정합니다.

.dropdown-submenu {
  display: none;
  width: inherit;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.17);
}
.dropdown-submenu a {
  display: block;
  padding: 7px;
  text-align: center;
}

처음에는 보이지 않아야 하므로 display를 none으로 설정합니다.

서브메뉴로 사용될 a태그들은 세로로 배치되어야 하므로 display를 block으로 설정했습니다.

2-4. hover

.dropdown-submenu a:hover {
  background-color: #eee;
}

.dropdown:hover .dropdown-submenu {
  display: block;
}

각 서브메뉴에 hover되면 색상을 반전시킵니다.

또한, 이전에 기본적으로 display를 none으로 했었는데, 다시 block으로 전환하여 메뉴가 등장할 수 있게 합니다.

이렇게 간단하게 JQuery를 사용하지 않더라도 예쁘게 드롭다운 메뉴를 만들 수 있습니다~~~!

저작자표시 비영리 (새창열림)