Make bootstrap dropdown menu

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 http://getbootstrap.com/.

• Action
• Another action
• Something else here
• Separated link

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

  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. 

Brand

• Link
• Link
• Dropdown 

 

• Link
• Dropdown 

  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>
    </ul>
  </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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></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?