[CSS - Hover, Display] 드롭다운 네비게이션

2022. 9. 25. 10:49· 프론트엔드/CS
목차
  1. 2-1. 전체 공통 디자인
  2. 2-2. dropdown 버튼 태그
  3. 2-3. 서브메뉴
  4. 2-4. hover

이번에는 여러 사이트에서 사용하고 있는 드롭다운 네비게이션 디자인을 만들어보겠습니다.

 

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를 사용하지 않더라도 예쁘게 드롭다운 메뉴를 만들 수 있습니다~~~!

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

'프론트엔드 > CS' 카테고리의 다른 글

[CSS - Hover, Opacity] Hover시 디테일 표시  (0) 2022.09.25
[CSS - keyframes, border-radius] 원 도형 아티클 디자인  (0) 2022.09.23
[CSS - Keyframes] 로딩 애니메이션(사각형 회전 이동, 색상 변화)  (1) 2022.09.23
[CSS - keyframes] 로딩 애니메이션(원 도형 크기, 투명도 변화)  (0) 2022.09.22
  1. 2-1. 전체 공통 디자인
  2. 2-2. dropdown 버튼 태그
  3. 2-3. 서브메뉴
  4. 2-4. hover
'프론트엔드/CS' 카테고리의 다른 글
  • [CSS - Hover, Opacity] Hover시 디테일 표시
  • [CSS - keyframes, border-radius] 원 도형 아티클 디자인
  • [CSS - Keyframes] 로딩 애니메이션(사각형 회전 이동, 색상 변화)
  • [CSS - keyframes] 로딩 애니메이션(원 도형 크기, 투명도 변화)
턴태
턴태
import { Dream } from "future";
턴태
턴태의 밑바닥부터 시작하는 de-vlog
턴태
전체
오늘
어제
  • ROOT (187)
    • Node.js (37)
      • ES6 (1)
      • TypeScript (3)
      • Express.js (16)
      • NestJS (16)
      • JS (24)
    • 프론트엔드 (29)
      • CS (5)
    • 백엔드 (1)
      • 검색 (2)
      • Database (1)
    • 기타 툴 (1)
      • git (1)
    • 데브옵스 & 인프라 (19)
      • Kubernetes (15)
      • Docker (2)
      • Monitoring (1)
      • IaC (1)
    • Algorithm (90)
      • Implementation & simulation (5)
      • Math (4)
      • Brute Force (1)
      • String (0)
      • Graph (5)
      • Recursion & Backtracking (19)
      • Divide & Conquer (2)
      • Dynamic Programming (18)
      • Greedy (13)
      • Priority Queue (2)
      • Binary Search (6)
      • Data Structure (7)
      • Shortest Path (5)
      • Minimum Spanning Tree (1)
      • Sorting (1)
      • Prefix Sum (1)
    • Linux (1)
      • Ubuntu (1)
    • Diary (5)
      • Algorithm (1)
      • Conference (1)
      • Retrospective (3)
    • Book (0)
      • Self-Development (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Omuk
  • 백트래킹
  • 오먹
  • 토이프로젝트
  • k8s
  • 쿠버네티스
  • 다이나믹 프로그래밍
  • 함수형 프로그래밍
  • nestjs
  • 인프런
  • 백준
  • dynamic programming
  • 익스프레스
  • TypeScript
  • GREEDY
  • python
  • node.js
  • Kubernetes
  • N과 M
  • 파이썬
  • 노드
  • 자바스크립트
  • 네스트
  • 타입스크립트
  • 디프만
  • Express
  • baekjoon
  • Toy Project
  • 인프런X디프만
  • backtracking

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.1
턴태
[CSS - Hover, Display] 드롭다운 네비게이션
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.