CSS와 hoverable 드롭 다운을 만듭니다.
데모 : 드롭 다운 예
아래의 예 위에 마우스를 이동 :
기본 드롭 다운
사용자가 요소 위에 마우스를 이동할 때 나타나는 드롭 다운 상자를 만듭니다.
예
<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> ) 드롭 다운 컨텐츠를 만들고 그 안에 원하는대로 추가합니다.
랩 <div> CSS 제대로 드롭 다운 컨텐츠를 배치 할 요소 주위 요소를.
CSS)에 .dropdown 클래스를 사용 position:relative , 우리는 드롭 다운 내용 (사용 오른쪽 드롭 다운 버튼 아래에 배치하고자 할 때 필요한 position:absolute ).
.dropdown-content 클래스 드롭 실제 콘텐츠를 보유하고있다. 그것은 기본적으로 숨겨져 있으며, (아래 참조) 호버에 표시됩니다. 메모 min-width 160 픽셀로 설정됩니다. .이 팁을 변경 주시기 바랍니다 : 당신이 드롭 다운 컨텐츠의 폭이 드롭 다운 버튼으로 폭과 같거나 넓은하려면 설정 width (100 %로 overflow:auto 작은 화면에 스크롤을 사용하도록).
대신 테두리를 사용하여, 우리는 CSS3 사용한 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);
}
/* 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;
더 예
드롭 다운 이미지
이 예는 드롭 다운 상자 안에 이미지 및 기타 콘텐츠를 추가하는 방법을 보여줍니다.
드롭 다운 Navbar의
이 예제는 네비게이션 바 내부의 드롭 다운 메뉴를 추가하는 방법을 보여줍니다.