부트 스트랩 드롭 다운 메뉴를 수행하는 방법

드롭 다운 메뉴는 트리거 (버튼 또는 링크)를 클릭하거나 호버링하여 표시되는 옵션 목록을 표시하는 패널입니다. 부트 스트랩 드롭 다운 메뉴를 만들려면 다음 단계가 필요합니다. 컨테이너를 만들고 드롭 다운 클래스를 추가하십시오. 트리거 요소 (버튼 또는 링크)를 추가하고 드롭 다운 토글 및 Data-Toggle = "Dropdown"속성을 추가하십시오. 지정되지 않은 목록을 작성하고 Dropdown-Menu 클래스를 추가하십시오. 목록에 링크 또는 내용이 포함 된 목록 항목을 추가하십시오.

부트 스트랩 드롭 다운 메뉴 제작 가이드

드롭 다운 메뉴는 무엇입니까?

드롭 다운 메뉴는 사용자가 클릭하거나 호버 할 때 옵션 목록이있는 패널을 표시하는 대화식 구성 요소입니다.

부트 스트랩 드롭 다운 메뉴를 만드는 방법?

드롭 다운 메뉴를 만들려면 다음 HTML 요소가 필요합니다.

<li> <div> 컨테이너는 드롭 다운 메뉴를 감싸는 데 사용됩니다<li> <code><button></button> 또는 <a></a> 요소 트리거로 요소되며 사용자가 클릭하거나 호버 할 때 메뉴가 표시됩니다. <li> <ul></ul> 정렬되지 않은 목록은 메뉴 옵션을 포함하는 데 사용됩니다 <li> <li> 목록 항목은 개별 메뉴 옵션을 나타내는 데 사용됩니다.

단계:

<li> <div> 컨테이너를 만들고 <code>dropdown 클래스를 추가하십시오.<li> 컨테이너 안에 트리거 요소 ( <button></button> 또는 <a></a> )를 추가하고 dropdown-toggle 및 data-toggle="dropdown" 속성을 추가하십시오. <li> 정렬되지 않은 <ul></ul> 목록을 작성하고 해당 목록에 dropdown-menu 클래스를 추가하십시오. <li> <ul></ul> 목록에 <li> 목록 항목을 추가하고 각 옵션에 대한 링크 또는 기타 컨텐츠를 추가하십시오.

샘플 코드 :

 <code class="html"><div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Dropdown </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> </ul> </div></code>

고급 옵션 :

<li> 하위 메뉴 : 중첩 <ul></ul> 및 <li> 요소를 사용하여 하위 메뉴를 만듭니다. <li> Delimiter : <li role="separator" class="divider"> 추가하여 메뉴 항목을 별도로 추가하십시오. <li> 제목 : add <li role="heading" class="dropdown-header"> 제목을 만들려면. <li> 항목 비활성화 : 메뉴 항목을 비활성화하려면 disabled 속성을 추가하십시오.

힌트:

<li> 트리거 요소에 aria-haspopup="true" 및 aria-expanded="false" 속성이 개선되어 접근성을 향상시켜야합니다. <li> JavaScript를 사용하여 드롭 다운 메뉴 이벤트를 처리합니다 (예 : 표시/숨기기 메뉴). <li> 보다 고급 사용을 위해 부트 스트랩 문서 및 구성 요소 예제를 활용하십시오.