CSS 드롭다운
CSS를 사용하여 호버링 가능한 드롭다운을 만듭니다.
데모: 드롭다운 예시
아래 예제 위로 마우스를 이동하십시오.
기본 드롭다운
사용자가 요소 위로 마우스를 이동할 때 나타나는 드롭다운 상자를 만듭니다.
예시
<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>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
예시 설명
HTML) 모든 요소를 사용하여 드롭다운 콘텐츠를 엽니다(예: <span> 또는 <button> 요소).
컨테이너 요소(예: <div>)를 사용하여 드롭다운 콘텐츠를 만들고 그 안에 원하는 것을 추가합니다.
CSS를 사용하여 드롭다운 콘텐츠를 올바르게 배치하려면 요소 주위에 <div> 요소를 래핑합니다.
CSS).dropdown 클래스는 드롭 position:relative다운 콘텐츠를 드롭다운 버튼 바로 아래에 배치할 때 필요한 를 사용합니다( position:absolute).
클래스 는 .dropdown-content실제 드롭다운 콘텐츠를 보유합니다. 기본적으로 숨겨져 있으며 마우스를 가져가면 표시됩니다(아래 참조). 160px min-width로 설정되어 있습니다. 자유롭게 변경하세요. 팁: 드롭다운 콘텐츠의 너비를 드롭다운 버튼만큼 넓히려면 width100% 로 설정 overflow:auto하고 작은 화면에서 스크롤을 활성화합니다.
테두리를 사용하는 대신 CSS box-shadow속성을 사용하여 드롭다운 메뉴가 "카드"처럼 보이도록 했습니다.
:hover선택기는 사용자가 드롭다운 버튼 위로 마우스를 이동할 때 드롭다운 메뉴를 표시하는 데 사용됩니다 .
드롭 다운 메뉴
사용자가 목록에서 옵션을 선택할 수 있는 드롭다운 메뉴를 만듭니다.
이 예제는 드롭다운 상자 안에 링크를 추가하고 스타일이 지정된 드롭다운 버튼에 맞게 스타일을 지정한다는 점을 제외하면 이전 예제와 유사합니다.
예시
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the
dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
오른쪽 정렬된 드롭다운 콘텐츠
드롭다운 메뉴가 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 이동하도록 하려면 right: 0;
예시
.dropdown-content {
right: 0;
}
더 많은 예
드롭다운 이미지
드롭다운 상자 안에 이미지 및 기타 콘텐츠를 추가하는 방법.
이미지 위로 마우스를 가져갑니다.
드롭다운 탐색 모음
탐색 모음 안에 드롭다운 메뉴를 추가하는 방법입니다.