Bootstrap Dropdown 플러그인 사용하기
디자인/Bootstrap 2013. 8. 19. 13:03Bootstrap Dropdown 플러그인 사용하기
TestBootstrapDropdown.html
웹페이지의 GNB 를 만들때 Bootstrap의 Dropdown 을 사용할 수 있습니다.
소스는 아래와 같으며 단순하게 HTML 로만 구성되어 있습니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://blueimp.github.io/cdn/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://blueimp.github.io/cdn/css/bootstrap.min.css">
</head>
<body>
<div class="bs-docs-example">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown"><a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown"><a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- /navbar-example -->
</div>
</body>
</html>
어떻게 HTML 소스만으로 위와 같은 Dropdown 메뉴를 구성하는지에 대해 궁금하실 텐데 Dropdown 메뉴를 생성하는 부분은 bootstrap.js 파일내에 존재합니다.
data-toggle="dropdown" 속성으로 Dropdown 메뉴인지를 판별하게 됩니다.
해당 소스는 첨부파일에 첨부되어 있으니 실행해보시기 바랍니다.
참고
http://getbootstrap.com/2.3.2/javascript.html#dropdowns
'디자인 > Bootstrap' 카테고리의 다른 글
| Bootstrap Form Helper 날짜선택 플러그인 (0) | 2013.08.19 |
|---|---|
| Bootstrap Form Helper 나라 선택 입력 폼 (0) | 2013.08.19 |
| Bootstrap Form Helper Phone 입력 필드 (0) | 2013.08.19 |
| 디자인에 취약한 개발자를 위한 CSS 솔루션 Bootstrap (0) | 2013.08.19 |