Bootstrap Dropdown 플러그인 사용하기

디자인/Bootstrap 2013. 8. 19. 13:03

Bootstrap 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


tags : ,
Trackbacks 0 : Comments 0

Write a comment