본문 바로가기
HTML/CSS문법

CSS dropdown

by flycoding 2023. 9. 3.
반응형

CSS를 사용하여 호버블 드롭다운을 만든다.

 

basic dropdown

사용자가 요소 위에서 마우스를 이동할 때 나타나는 드롭다운 상자를 만든다.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>Hoverable 드롭다운</h2>
<p>아래 텍스트 위로 마우스를 이동하여 드롭다운 내용을 엽니다.</p>

<div class="dropdown">
  <span>이곳에 마우스를 올려보세요</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</body>
</html>

HTML) 드롭다운 내용(예: <span> 또는 <버튼> 요소)을 열려면 임의의 요소를 사용한다.

컨테이너 요소(예: <div>)를 사용하여 드롭다운 내용을 만들고 원하는 내용을 추가한다.

CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 요소 주위에 <div> 요소를 둘러 놓는다.

CSS) . dropdown 클래스는 드롭다운 내용을 드롭다운 버튼 바로 아래에 배치하고자 할 때 필요한 position:relative를 사용한다(position:absolute 사용).

.dropdown-content 클래스는 실제 드롭다운 콘텐츠를 저장한다. 기본적으로 숨겨져 있으며, 호버(아래 참조)에 표시된다. 최소 너비는 160px로 설정되어 있다. 이를 변경가능하다.

팁: 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 넓게 설정하려면 너비를 100%로 설정하시오(그리고 overflow:auto를 사용하여 작은 화면에서 스크롤할 수 있다).

테두리를 사용하는 대신 CSS 상자 shadow 속성을 사용하여 드롭다운 메뉴를 "카드"처럼 만들었다.

:hover 선택기는 사용자가 마우스를 드롭다운 버튼 위로 이동할 때 드롭다운 메뉴를 표시하는 데 사용된다.

CSS hoverable dropdown 활용 예제

 

Dropdown menu

사용자가 목록에서 옵션을 선택할 수 있는 드롭다운 메뉴를 만들어보자:

이 예는 드롭다운 상자 안에 링크를 추가하고 스타일 드롭다운 단추에 맞게 스타일을 지정한다는 점을 제외하고는 이전 예와 유사하다:

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

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

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>드롭다운 메뉴</h2>
<p>마우스를 버튼 위로 이동하여 드롭다운 메뉴를 엽니다.</p>

<div class="dropdown">
  <button class="dropbtn">드롭다운</button>
  <div class="dropdown-content">
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <a href="#">링크 3</a>
  </div>
</div>

<p><strong>Note:</strong> 우리는 테스트 링크에 href="#"을 사용합니다. 실제 웹 사이트에서 이것은 URL일 것입니다.</p>

</body>
</html>

.dropdownbtn 클래스에는 배경색은 #4CAF50, 글자색은 white, padding 16px, font-size 16px, border none, cursor는 pointer로 설정하였다.

.dropdown 클래스는 position은 relative, display는 inline-block으로 설정하였으며

.dropdown-content 클래스는 display none, position absolute, 배경색은 #f9f9f9 min-width 160px z-index 1로 설정하였으며

드롭다운 내부의 링크 설정을 위해 .dropdown-content a 클래스는 글자색은 검정 padding 12px 16px, text-decoration none, display는 block으로 설정하였다.

.dropdwon-content a:hover 상태에서는 배경색을 #f1f1f1로 설정하여 배경색을 변경하며

호버시 드롭다운 메뉴를 보여주기 위해 .dropdwon:hover, .dropdown-content 클래스에 display block을 설정한다.

CSS dropdown menu 예제

 

오른쪽 정렬 드롭다운

드롭다운 메뉴를 왼쪽에서 오른쪽으로 이동하는 대신, 오른쪽에서 왼쪽으로 이동하려면 right:0 을 추가합니다.

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

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

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>정렬된 드롭다운 컨텐츠</h2>
<p>드롭다운 내용이 왼쪽에서 오른쪽으로 갈지 오른쪽에서 왼쪽으로 갈지 오른쪽으로 갈지 결정합니다.</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">왼쪽</button>
  <div class="dropdown-content" style="left:0;">
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <a href="#">링크 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">오른쪽</button>
  <div class="dropdown-content">
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <a href="#">링크 3</a>
  </div>
</div>

</body>
</html>

오른쪽으로 드롭다운메뉴를 위치시키려면 right:0으로 설정하여 지정한다. 실행한 그림은 아래 그림과 같다.

CSS aligned dropdown content 활용 예제

 

CSS dropdown image

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<h2>드롭다운 이미지</h2>
<p>아래 이미지 위로 마우스를 이동하여 드롭다운 콘텐츠를 엽니다.</p>

<div class="dropdown">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
  <div class="dropdown-content">
  <img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
  <div class="desc">아름다운 해안</div>
  </div>
</div>

</body>
</html>

이미지에 마우스를 위에 올려놓으면 아래 그림과 같이 큰 그림 이미지가 표시된다. 

CSS dropdown image 활용예제

 

드롭다운 NavBar

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">홈</a></li>
  <li><a href="#news">뉴스</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">드롭다운</a>
    <div class="dropdown-content">
      <a href="#">링크 1</a>
      <a href="#">링크 2</a>
      <a href="#">링크 3</a>
    </div>
  </li>
</ul>

<h3>탐색 모음 내부의 드롭다운 메뉴</h3>
<p>드롭다운 메뉴를 보려면 "드롭다운" 링크 위에 마우스를 놓습니다.</p>

</body>
</html>

드롭다운 메뉴에 마우스를 올려놓으면 아래 그림과 같이 링크1, 링크2, 링크3 메뉴가 표시된다.

CSS dropdown Navbar 활용예제

 

지금까지 CSS에서 dropdown 메뉴를 사용하는 방법에 대해서 살펴보았다.

꼭 손으로 눈으로 머리로 익히며 실습하기를 바란다.

모두 화이팅입니다.!!!

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

반응형
저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS image sprites  (0) 2023.09.05
CSS image gallery  (3) 2023.09.04
CSS 수평 네비게이션 바  (0) 2023.09.02
CSS navigation bar  (0) 2023.09.01
CSS opacity/transparency  (0) 2023.08.31

관련글

댓글

티스토리툴바