이번에는 여러 사이트에서 사용하고 있는 드롭다운 네비게이션 디자인을 만들어보겠습니다.
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를 사용하지 않더라도 예쁘게 드롭다운 메뉴를 만들 수 있습니다~~~!
'Frontend > CS' 카테고리의 다른 글
| [CSS - Hover, Opacity] Hover시 디테일 표시 (0) | 2022.09.25 |
|---|---|
| [CSS - keyframes, border-radius] 원 도형 아티클 디자인 (0) | 2022.09.23 |
| [CSS - Keyframes] 로딩 애니메이션(사각형 회전 이동, 색상 변화) (0) | 2022.09.23 |
| [CSS - keyframes] 로딩 애니메이션(원 도형 크기, 투명도 변화) (0) | 2022.09.22 |
