Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)-JS 튜토리얼-php.cn

이 글은 부트스트랩 프레임워크에서의 드롭다운 메뉴 구현에 관한 것입니다(코드 예제). 필요한 친구들이 참고할 수 있기를 바랍니다.

웹 페이지와 상호 작용할 때 상황에 맞는 메뉴 또는 숨겨진/표시 메뉴 항목이 필요한 경우가 많습니다. Bootstrap은 기본적으로 링크 목록을 표시하기 위한 전환 가능한 상황에 맞는 메뉴를 제공합니다. 또한 다양한 대화형 상태의 메뉴 표시는 자바스크립트 플러그인과 함께 사용해야 합니다. 이번 글에서는 Bootstrap 드롭다운 메뉴에 대해 자세히 소개하겠습니다. (무료 강좌 추천: bootstrap tutorial)

사용 방법

Bootstrap 프레임워크의 드롭다운 메뉴를 사용할 때는 bootstrap.js를 호출해야 합니다. Bootstrap 프레임워크에서 제공하는 파일입니다. 물론, 컴파일되지 않은 버전을 사용한다면 js 폴더에서 "dropdown.js"라는 파일을 찾을 수 있고, 이 js 파일을 호출할 수도 있습니다

Bootstrap의 컴포넌트 상호작용 효과는 모두 jQuery 라이브러리를 기반으로 작성되었기 때문입니다. 플러그인이므로 효과를 생성하려면 bootstrap.js를 사용하기 전에 jquery.js를 로드해야 합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

로그인 후 복사

기본 사용법

Bootstrap 프레임워크에서 드롭다운 메뉴 구성 요소를 사용할 때 사용하는 것이 매우 중요합니다. 올바른 구조가 중요합니다. 구조와 클래스 이름이 올바르게 사용되지 않으면 구성 요소의 정상적인 사용 여부에 직접적인 영향을 미칩니다

1. 전체 드롭다운 메뉴 요소를 래핑하려면 "dropdown"이라는 컨테이너를 사용하세요.

<div class="dropdown"></div>

로그인 후 복사

2. <버튼> 사용 버튼은 상위 메뉴로 사용되며 클래스 이름 "dropdown-toggle" 및 사용자 정의 "data-toggle" 속성을 정의하며 값은 다음과 일치해야 합니다. 가장 바깥쪽 컨테이너 클래스 이름

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">

로그인 후 복사

3. 드롭다운 메뉴 항목은 ul 목록을 사용하고 "dropdown-menu"

<ul class="dropdown-menu" role="menu">

로그인 후 복사

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

로그인 후 복사

Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)

4. 드롭다운 메뉴의 상위 요소에 대한

클래스를 설정하면 메뉴가 팝업되도록 할 수 있습니다(기본값은 팝다운).dropup

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
  </ul>
</div>

로그인 후 복사

Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)

원리 분석

Bootstrap 프레임워크의 드롭다운 메뉴 구성요소인 해당 드롭다운 메뉴 항목은 사용자가 상위 메뉴 항목을 클릭할 때 "dropdown-menu" 기본 스타일이 "display:none"으로 설정되어 있기 때문에 기본적으로 숨겨집니다. , 드롭다운 메뉴가 표시되며, 사용자가 다시 클릭하면 드롭다운 메뉴가 계속 숨겨집니다

.dropdown-menu {
  position: absolute;/*设置绝对定位，相对于父元素p.dropdown*/
  top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
  left: 0;
  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/
  display: none;/*默认隐藏下拉菜单项*/
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

로그인 후 복사

[구현 원칙]

　1. 웹 페이지가 로드되면 드롭다운 메뉴가 플러그인은 data-toggle="dropdown" 스타일

　2으로 모든 요소에 이벤트 바인딩을 수행합니다. 사용자가 data-toggle="dropdown" 스타일로 링크나 버튼을 클릭하면 자바스크립트 이벤트 코드가 트리거됩니다

3. 자바스크립트 이벤트 코드는 상위 컨테이너에 .open 스타일을 추가합니다

4. 기본적으로 숨겨져 있는 .dropdown-menu 메뉴는 외부적으로 .open 스타일을 적용한 후 표시할 수 있어 기대 효과

　5. 사용자가 다시 클릭하면 "p.dropdown" 컨테이너의 클래스 이름 "open"이 다시 제거됩니다.

.open > .dropdown-menu {
  display: block;
}

로그인 후 복사

[기타 사용법]

또 다른 흥미로운 사용법이 있습니다. 트리거 요소는 상위 요소 외부에 배치될 수 있습니다. 메뉴의 컨테이너

　단, 이 방법을 사용할 때 주의할 점이 두 가지 있습니다

　1. 상위 컨테이너의 id 값을 설정합니다

　2. 트리거 요소의 data-toggle 속성과 data-target 속성을 설정하고, 데이터 대상 속성 값은 #id

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown" data-target="#dropdown1">外部触发器</button>
<div class="dropdown" id="dropdown1">
    <ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
        <li role="presentation"><a href="##">HTML</a></li>
        <li role="presentation"><a href="##">CSS</a></li>
        <li role="presentation"><a href="##">javascript</a></li>
    </ul>
</div>

로그인 후 복사

Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)

Extended Usage

[Divider]

Bootstrap 프레임워크의 드롭다운 메뉴는 드롭다운 구분선을 제공합니다. 드롭다운 메뉴에 두 개의 그룹이 있는 경우 그룹 사이에 빈

를 추가하고 이

에 클래스 이름을 추가하여 드롭다운 구분 기호를 추가하는 기능을 구현할 수 있습니다.

.dropdown-menu .pider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

로그인 후 복사

<li role="separator" class="pider"></li>

로그인 후 복사

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

로그인 후 복사

【메뉴 제목】

Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예) 드롭다운 메뉴에 제목을 추가하여 작업 그룹을 표시할 수 있습니다

<li class="dropdown-header">Dropdown header</li>

로그인 후 복사

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999;
}

로그인 후 복사

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

로그인 후 복사

Bootstrap 프레임워크 아래 드롭다운 메뉴 구현(코드 예)

【对齐方式】

Bootstrap框架中下拉菜单默认是左对齐，如果想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名

.dropdown-menu-right {
  right: 0;
  left: auto;
}

로그인 후 복사

由于