CSS와 hoverable 드롭 다운 메뉴를 만드는 방법에 대해 알아 봅니다.
쓰러지 다
드롭 다운 메뉴는 사용자가 미리 정의 된 목록에서 하나 개의 값을 선택할 수있는 전환 가능한 메뉴입니다 :
Hoverable 드롭 다운 만들기
사용자가 요소 위로 마우스를 이동하면 나타나는 드롭 다운 메뉴를 만듭니다.
1 단계) HTML을 추가합니다 :
예
<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>예 설명
드롭 다운 메뉴, 예를 들면 <버튼> 열고있는 요소를 사용 <a> 또는 <p> 요소.
컨테이너 요소 사용 (like <div>) 드롭 다운 메뉴를 만들고 그 안에 드롭 다운 링크를 추가합니다.
랩 <div> 버튼 주변의 요소를 <div> CSS 제대로 드롭 다운 메뉴를 배치합니다.
2 단계) CSS를 추가 :
예
/* 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);
}
/* 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;
} »그것을 자신을 시도 예 설명
우리는 등을 배경 색, 패딩과 드롭 다운 버튼 스타일 한
.dropdown 클래스 사용 position:relative , 우리는 드롭 콘텐츠를 원할 때 필요한 오른쪽 드롭 다운 버튼 아래에 배치되는 (using position:absolute ) .
.dropdown-content 클래스는 실제 드롭 다운 메뉴를 보유하고 있습니다. 그것은 기본적으로 숨겨져 있으며, 호버에 표시됩니다 (see below) . 노트 min-width 160 픽셀로 설정된다. 이 설정을 변경하시기 바랍니다. 팁 : 드롭 다운 콘텐츠의 폭이 드롭 다운 버튼으로 폭과 같거나 넓은하려면 설정 width (100 %로 overflow:auto 작은 화면에 스크롤을 가능하게).
대신 테두리를 사용하여, 우리는 사용하고 box-shadow 드롭 다운 메뉴가처럼 보이게 속성을 "card" .
:hover 선택은 사용자가 드롭 다운 버튼 위에 마우스를 이동할 때 드롭 다운 메뉴를 표시하는 데 사용됩니다.
네비게이션 바에있는 드롭 다운 메뉴
팁 : 우리의 이동 CSS 드롭 다운 튜토리얼 드롭 다운에 대한 자세한 내용은.