Dropdown JS

A universal dropdown, attachable to almost any relevant component. Requires additional JS.

---

To add the dropdowns demonstrated above, use the following code (with jQuery):

<div class="dropdown-container">
  <button class="btn btn-default" onClick="$('#dd1').toggleClass('active')">Left Dropdown</button>
  <div class="dropdown" id="dd1">
    <a href="#">Home</a>
    <a href="#">Very long text is supported, too.</a>
    <a href="#">About</a>
    <hr class="dropdown-separator">
    <a href="#">Sign in</a>
    <a href="#" class="disabled">Disabled</a>
  </div>
</div>
<div class="dropdown-container right">
  <button class="btn btn-default" onClick="$('#dd2').toggleClass('active')">Right Dropdown</button>
  <div class="dropdown" id="dd2">
    <a href="#">Home</a>
    <a href="#">Very long text is supported, too.</a>
    <a href="#">About</a>
    <hr class="dropdown-separator">
    <a href="#">Sign in</a>
    <a href="#" class="disabled">Disabled</a>
  </div>
</div>
<div class="dropdown-container top">
  <button class="btn btn-default" onClick="$('#dd3').toggleClass('active')">Dropup</button>
  <div class="dropdown" id="dd3">
    <a href="#">Home</a>
    <a href="#">Very long text is supported, too.</a>
    <a href="#">About</a>
    <hr class="dropdown-separator">
    <a href="#">Sign in</a>
    <a href="#" class="disabled">Disabled</a>
  </div>
</div>

As demonstrated in this example, you need to toggle the class active on the dropdown div. This can be triggered by any component, placed directly before the dropdown div in the dropdown-container div.

Navbar dropdowns

As navbars have a completely different appearance in Magic, they have a completely different dropdown, too.

<nav class="blue">
  <ul class="nav-left">
    <li class="nav-brand-container"><h1 class="nav-brand-text">Example Navbar</h1></li>
  </ul>
  <ul class="nav-right">
    <li class="nav-item active"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
    <li class="nav-item"><a href="#">About</a></li>
    <li class="nav-item">
      <div class="nav-dropdown-container">
        <a href="#" onClick="$('#dd4').toggleClass('active'); return false;">More <i class="fas fa-caret-down"></i></a>
        <div class="nav-dropdown" id="dd4">
          <a href="#">Sign in</a>
          <a href="#">Sign up</a>
          <a href="#">My profile</a>
          <a href="#" class="red">Issues</a>
        </div>
      </div>
    </li>
  </ul>
</nav>

These work on a fairly similar basis to regular dropdowns, but look completely different and can't have disabled links, but can have coloured links.