방법 - 클릭 가능한 드롭 다운

CSS 및 JavaScript를 클릭 할 수있는 드롭 다운 메뉴를 만드는 방법에 대해 알아보십시오.

쓰러지 다

드롭 다운 메뉴는 사용자가 미리 정의 된 목록에서 하나 개의 값을 선택할 수있는 전환 가능한 메뉴입니다 :

클릭 가능한 드롭 다운 만들기

사용자가 버튼을 클릭했을 때 나타나는 드롭 다운 메뉴를 만듭니다.

1 단계) HTML을 추가합니다 :

예

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" 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;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* 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 (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

예 설명

우리는 효과를 가져 배경 색상, 패딩 드롭 다운 버튼 스타일 한 등

.dropdown 클래스 사용 position:relative , 우리는 드롭 콘텐츠를 원할 때 필요한 오른쪽 드롭 다운 버튼 아래에 배치되는 (using position:absolute ) .

.dropdown-content 클래스는 실제 드롭 다운 메뉴를 보유하고 있습니다. 그것은 기본적으로 숨겨져 있으며, 호버에 표시됩니다 (see below) . 노트 min-width 160 픽셀로 설정된다. 이 설정을 변경하시기 바랍니다. 팁 : 드롭 다운 콘텐츠의 폭이 드롭 다운 버튼으로 폭과 같거나 넓은하려면 설정 width (100 %로 overflow:auto 작은 화면에 스크롤을 가능하게).

대신 테두리를 사용하여, 우리는 사용하고 box-shadow 드롭 다운 메뉴가처럼 보이게 속성을 "card" .

3 단계) 자바 스크립트를 추가합니다

예

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

»그것을 자신을 시도