[Bootstrap] 부트스트랩 드롭다운 메뉴 사용하기 - 기본편

 


#. Introduction


부트스트랩에서 드롭다운 메뉴를 사용하는 방법에 대해 알아보도록 하겠습니다. 코드가 단순하고 짧기 때문에 사용하는데에 무리가 없을 것이며 컴포넌트의 드롭다운(http://bootstrapk.com/components/#dropdowns) 부분을 참고하여 작성할 것입니다. 그 전에, 부트스트랩을 시작해야 하는 단계라면, [Bootstrap] 반응형 웹을 위한 부트스트랩 사용 준비하기 포스트를 먼저 선행하여 주시기 바랍니다.





#. Code



#. index.html


특별한 설명없이, 바로 코드로 진입하도록 하겠습니다. 드롭다운 메뉴의 코드는 다음과 같습니다. 여기서 우리는 몇가지 중요한 것들을 알아보도록 하겠습니다. 부트스트랩을 포함하는 것이나, 불러오는 것은 [Bootstrap] 반응형 웹을 위한 부트스트랩 사용 준비하기 에서 설명이 되어있으므로 생략하도록 하겠습니다. 다음의 설명은 속성을 간략하게 설명 한 것입니다.


div Class : .dropdown : 드롭다운 메뉴를 감싸는 엘리먼트입니다. 클래스에 .dropup 을 추가하는 것으로, 하단 드롭이 아닌, 상단 드롭으로 바꿀 수 있습니다.

ex ) <div class="dropdown dropup"... >

button Class : .btn .btn-default dropdown-toggle : 드롭다운 버튼을 지정하는 클래스입니다.

button id : 버튼의 아이디를 지정합니다. HTML에서 유일해야합니다.

button data-toggle : 버튼을 토글(on/off) 하기위한 부트스트랩 정의 속성입니다.

ul Class : .dropdown-menu 메뉴를 생성하는 클래스입니다. 메뉴의 기본위치는 왼쪽 상단입니다. .dropdown-menu-right 를 추가하면, 메뉴의 위치를 오른쪽으로 정렬시킬 수 있습니다.

ex ) <ul class="dropdown-menu dropdown-menu-right .... >

ul aria-labelledby : 웹 접근성을 위한 속성입니다. 버튼의 아이디와 동일합니다.

li > a tabindex : TAB 접근에 관한 속성입니다. '-1' 인경우 tab 으로 접근할 수 없습니다.

li > a href : 메뉴를 클릭되면 이동 할 링크입니다.


<!DOCTYPE html>

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- 부트스트랩 -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>

    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
                data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <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"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>
    </div>

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>


여기서 잠깐, 드롭다운 메뉴의 구조를 살펴보도록 하겠습니다. 단순하기 때문에 설명이 그렇게 길지 않습니다.


<div class="dropdown"></div> : 드롭다운 메뉴의 부모 엘리먼트입니다.

<button ...></button>  : 드롭다운 메뉴의 메인 버튼입니다. 이 버튼을 누르면 메뉴가 나타납니다.

<span class="caret"></span> : 단순 화살표입니다.

<ul class="dropdown-menu"></ul> : 드롭다운 메뉴입니다.

<li></li> : 드롭다운 메뉴에서 각각의 메뉴항목을 나타냅니다.

<a href="#"></a> : 메뉴를 누르면 이동하게 될 링크를 설정합니다. 


<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
            data-toggle="dropdown" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <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"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
    </ul>
</div>



#. Functions


드롭다운 메뉴사용시 부가적으로 사용할 수 있는 기능입니다. 필수는 아니며, 필요에 따라 사용하실 수 있습니다.


#. Header


메뉴에서 제목을 나타는 부분을 만들 수 있습니다. li 태그에 .dropdown-header 클래스를 추가하여 주세요.



<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header"><a role="menuitem" tabindex="-1" href="#">Header</a></li>
    ...
</ul>


#. Divider


메뉴아이템 사이에 구분선을 만들 수 있습니다. li 태그에 .divider 클래스를 추가 해주세요.



<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="divider"></li>
    ...
</ul>


#. Disabled


비활성성화 된 버튼을 메뉴가 추가할 수 있습니다. li 태그에 .disabled 클래스를 추가 해주세요.



<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="disabled"></li>
    ...
</ul>



#. PostScript 


부트스트랩 공식 블로그(http://blog.getbootstrap.com/) 를 통해 부트스트랩의 개발정보를 얻으실 수 있으며 부트스트랩 전시관(http://expo.getbootstrap.com/) 에서는 부트스트랩으로 작성된 홈페이지들을 볼 수 있습니다. 부트스트랩의 예제들은 http://bootstrapk.com/getting-started/#examples 에서 확인하실 수 있습니다. 이번 포스팅은 드롭다운 메뉴의 기본편입니다. 다음 포스팅에서는 Dropdown.js 자바스크립트 사용법을 알아보도록 하겠습니다. 


신고