Dropdowns

Concise includes a JavaScript solution to dropdowns using the jQuery framework. This use of JavaScript allows for graceful transitions and a better user experience when using dropdowns.

The key to creating dropdowns is wrapping the .dropdown-menu class inside of a .dropdown class. Any content outside of the .dropdown-menu class will not be shown in the dropdown, whereas any content inside of it will be.

These dropdowns are not limited to displaying list items. They also can be used to display paragraphs of text, images, and videos.

All of the icons used in the examples below are from a modified version of the Font Awesome icon font library.

Default

The jQuery dropdowns by default are what's known as the "regular" or "medium" size.

<span class="dropdown">Dropdown
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

On Hover

By default, the jQuery dropdown is displayed when the user clicks, but by adding the class .dropdown-hover to .dropdown, you can display the dropdown menu on hover.

<span class="dropdown dropdown-hover">Dropdown
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Dropup

By simply adding the class .up to whatever element contains the .dropdown class, what's known as a dropup can easily be created.

<span class="dropdown up">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Arrows

By adding a .dropdown-arrow-* class to your .dropdown class, an arrow can be easily added to your dropdown on either the left or right side. These arrow classes can also be displayed on dropups as well.

Left Arrow

<span class="dropdown dropdown-arrow-left">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Right Arrow

<span class="dropdown up dropdown-arrow-right">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Sizes

Small

Adding .dropdown-small to any element with a .dropdown class will result in the dropdown being 150px in size.

<span class="dropdown dropdown-small">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Large

Adding .dropdown-large to any element with a .dropdown class will result in the dropdown being 350px in size.

<span class="dropdown dropdown-large">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Full

Adding .dropdown-full to any element with a .dropdown class will result in the dropdown inheriting the full width of its parent element.

<span class="dropdown dropdown-full">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Collapse Full

Adding .dropdown-collapse-full to any element with a .dropdown class will result in the dropdown taking up 100% the width of it's parent element after the browser has reached the extra-small breakpoint (which is 30em by default).

<span class="dropdown dropdown-collapse-full">Dropup
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Headers

By adding the .header class to any item inside of the dropdown menu, you can easily designate different sections of content.

<span class="btn btn--borderBlue dropdown">Dropdown
  <ul class="dropdown-menu">
    <li class="header">...</li>
    <li><a href="#">...</a></li>
  </ul>
</span>

Button Dropdowns

Extending the .btn class is just one of the many ways that you can add dropdowns into your design. By default, dropdowns added to a .btnclass will take up the full width of the button, providing a cleaner user interface. In addition, the border-radius and font-weight of the button also will be inherited.

<span class="btn btn--borderBlue dropdown">Dropdown
  <ul class="dropdown-menu">
    <li><a href="#">...</a></li>
  </ul>
</span>

Media

Image

Preview

Dropdown with image

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidun.

Code

<span class="dropdown">Dropdown
  <div class="dropdown-menu">
    <img src="">
  </div>
</span>

Video

<span class="dropdown dropdown-large">Dropdown
  <div class="dropdown-menu">
    <iframe src="">
  </div>
</span>