Make bootstrap dropdown menu

Posted by Readiz
2014.03.09 23:15 Creation/Design

Let's make bootstrap dropdown menu

  Bootstrap has many great features. Easy and great-looking dropdown menu is one of the things. At first, look at the reference in the page of

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    <span class="caret"></span>
  <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" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>

  Dropdown is a 'Component' of bootstrap. How we can make a dropdown menu? First you need the unordered list(<ul>). Its class is 'dropdown-menu' and role is 'menu'. <li> can be divider if it is added with the class of 'divider'. 'aria-labelledby' will be treated later.

 Dropdown Menu will be shown up when you click the some button or something. 'Dropdown menu' cannot exist itself, so it must be linked. In upper example, there is the button named Dropdown. It must be linked with


 those button. Linking is so easy. You can simply link the dropdown menu with the button.

1. Make button.

2. Give ID to the button.

3. Set 'data-toggle' to 'dropdown'.

4. 'aria-labelledby' of the unordered list(<ul>, dropdown menu) is ID of the button.

  Although you don't want to link with the buttons, the process almost same. For example, there is the navbar. 

  Navbar can have dropdown-menu, too.

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
      <li class="divider"></li>
      <li><a href="#">One more separated link</a></li>

  It won't need the ID because what is linked with dropdown-menu is so obvious. You can make dropdown-menu by simply adding classes and data-toggle option.

  In these work, jQuery and bootstrap's JS must be required. Because making something show or hide is the JS's role. So,

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src=""></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

  It is the general code. Do you realize why jQuery and JS are needed? 

저작자 표시 비영리 변경 금지
이 댓글을 비밀 댓글로
  1. 영어지만... 콩글리쉬로... 대략적인 내용 파악은 되네요 ^^; 드롭다운 메뉴 때문에... 가로폭이 변경되서 디스플레이 변경시... 상단 메뉴바가 나뉘는 현상땜에 고생한거 생각하면... 아직도 이해가 많이 부족한 거 같네요 ㅜㅜ;; 앞으로는 조금만 귀찮게 해드리도록 노력하겠습니다.
    • 안귀찮아요~ 자주 들러서 질문하세요.
  2. 그리 말씀해주시니 넘 감사하네요 ㅎㅎ 이제 막.... 패스트부트 스킨 적용 후기.... 겸 소개 포스팅 완료 했네요... 두세차례 연재가 될 것 같네요...
    • 소마
    • 2015.07.07 12:05 신고
    드롭다운 적용해서 만드는 것 까진 했는데, 각 항목을 선택했을 때 그에 따른 동작(드롭다운 메뉴 아래에 각 항목에 알맞은 입력 폼을 표시)을 하고 싶은데, 어떻게 해야 할지 잘 모르겠습니다.
    혹시 방법을 알고 계시다면 조언을 부탁드려도 될까요?

티스토리 툴바