안녕하세요. 명월입니다.
이 글은 Bootstrap에서 드롭 다운(Dropdown)에 대한 글입니다.
Dropdown 컨트롤은 Html에서의 Select 오브젝트랑 유사한 컨트럴입니다. 실제 Html 태그에서는 Select 태그를 사용하는 것이 아니고 Div와 ul 태그를 이용해서 사용합니다.
드롭 다운은 select 태그가 아니기 때문에 css 태그를 적용하기 쉽고 여러가지 환경에서 응용이 가능하다는 장점이 있습니다.
참고로 select 박스는 option 태그의 글자 크기와 css 설정의 어려움이 있습니다.
링크 - https://getbootstrap.com/docs/3.4/javascript/#dropdowns
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 네비게이션(nav) 컨트롤에 사요하는 드롭다운. -->
<div style="margin:20px;">
<nav id="navbar-example" class="navbar navbar-default navbar-static">
<div class="container-fluid">
<!-- 네비게이션(nav)의 기본 설정으로 모바일일 때, 메뉴 버튼이 나온다. -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 타이틀임. -->
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- 메뉴 설정 -->
<div class="collapse navbar-collapse">
<!-- 메뉴는 왼쪽으로 두개 설정 -->
<ul class="nav navbar-nav">
<!-- 메뉴 이름은 Hello로 서브 옵션은 Test1과 Test2가 있다. -->
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Hello
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
</ul>
</li>
<!-- 메뉴 이름은 World로 서브 옵션은 Test3과 Test4가 있다. -->
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
World
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Test3</a></li>
<li><a href="#">Test4</a></li>
</ul>
</li>
</ul>
<!-- 메뉴를 오른쪽 정렬로 설정 가능 -->
<ul class="nav navbar-nav navbar-right">
<!-- 메뉴 이름은 Right!로 서브 옵션은 Test5와 Test6가 있다. -->
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Right!
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Test5</a></li>
<li><a href="#">Test6</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- 두번째 메뉴는 nav가 아닌 일반 ul로 설정 했다. -->
<div style="margin:20px;">
<!-- ul만으로 드롭 다운을 설정했다. -->
<ul class="nav nav-pills" >
<!-- 일반 링크 -->
<li class="active"><a href="#">Regular link</a></li>
<!-- 메뉴 이름은 Single로 서브 옵션은 Test1와 Test2가 있다. -->
<li class="dropdown">
<a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown">
Single
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
</ul>
</li>
</ul>
</div>
<!-- 세번째 메뉴는 메뉴 스타일이 아닌 독립적으로 사용했다. -->
<div style="margin:20px;">
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Independence
<!-- 아래 화살표 -->
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
</ul>
</div>
</div>
</body>
</html>
위 소스 3가지 예제를 소개했습니다.
공통적으로 dropdown이 될 컨트럴의 class는 「dropdown」이 되고 하위에 메뉴 이름의 클래스는 「dropdown-toggle」입니다. 그리고 속성으로 「data-toggle=dropdown」을 넣습니다.
실제 메뉴가 되는 태그는 ul로 설정하고 클래스는 「dropdown-menu」입니다. 각 메뉴는 li태그로 설정합니다.
그리고 dropdown은 event 설정이 가능합니다.
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- Bootstrap cdn 설정 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="margin:20px;">
<!-- 이벤트를 확인하기 위한 dropdown 컨트럴 -->
<!-- 이벤트는 event-dropdown 클래스로 걸었다. -->
<div class="dropdown event-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Test
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Sub Test1</a></li>
<li><a href="#">Sub Test2</a></li>
</ul>
</div>
<textarea readonly id="console" style="resize:none;font-size:10px;width:150px;height:150px;margin-top:100px;"></textarea>
</div>
<script>
// 위 textarea로 결과를 확인한다.
var consoleArea = document.getElementById("console");
// 로그 함수
consoleArea.log = function(msg) {
consoleArea.value += msg + "\n";
}
// dropdown 메뉴가 보이기 직전에 호출되는 이벤트
$('.event-dropdown').on('show.bs.dropdown', function () {
consoleArea.log("메뉴가 열리기 전 이벤트!");
});
// dropdown 메뉴가 보이기 직후에 호출되는 이벤트
$('.event-dropdown').on('shown.bs.dropdown', function () {
consoleArea.log("메뉴가 열린 후 이벤트!");
});
// dropdown 메뉴가 사라지기 직전에 호출되는 이벤트
$('.event-dropdown').on('hide.bs.dropdown', function () {
consoleArea.log("메뉴가 닫히기 전 이벤트!");
});
// dropdown 메뉴가 사라진 직후에 호출되는 이벤트
$('.event-dropdown').on('hidden.bs.dropdown ', function () {
consoleArea.log("메뉴가 닫힌 후 이벤트!");
});
</script>
</body>
</html>
여기까지 Bootstrap에서 드롭 다운(Dropdown)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Open source > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 툴팁(tooltip) (0) | 2020.02.29 |
|---|---|
| [Bootstrap] 탭 (Tab) (0) | 2020.02.28 |
| [Bootstrap] Panel과 Thumbnails, Card (0) | 2020.02.27 |
| [Bootstrap] 페이징(Paging)와 페이저(pager) (0) | 2020.02.26 |
| [Bootstrap] Collapse(메뉴 접기, 펴기)를 사용하는 방법 (0) | 2019.12.01 |
| [Bootstrap] Scrollspy (0) | 2019.09.02 |
| [Bootstrap] 모달 (Modal) (2) | 2019.07.19 |
| [Bootstrap] Breadcrumbs(웹 네비게이션) 디자인과 Paging 디자인 (0) | 2019.07.17 |