Dropdowns

Dropdown component styles for <details> disclosure elements.

Source file: src/css/dropdowns.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/dropdowns.css
JavaScript: https://github.com/pmbrown/ming-css/blob/main/assets/js/ming.dropdowns.js

Included with:

ming.css
ming.min.css
ming.mono.css
ming.mono.min.css

Default (anchor)

Inclusion of either the '.dropdown' or '.dropdown-body' utility classes on an internal container within a <details> disclosure element converts it into a dropdown component.

Dropdown

Dropdown body

<details name="dropdown-demo">
<summary>Dropdown</summary>
  <div class="dropdown">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary>Dropdown body</summary>
  <div class="dropdown-body">
    <h3>With heading</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <a href="#">Link to action</a>
  </div>
  <div class="close-dropdown"></div>
</details>

The unique 'name' attribute ensures only one dropdown is open, the '.close-dropdown' div is styled to work with the 'ming.dropdowns.js' to enable clicking outside the dropdown to close it. Both of these are optional and only required for the functionality described.

HTML ordered and unordered list types can also be used for the '.dropdown' container, and buttons can be included instead of links.

List links

List buttons

Example HTML

<details name="dropdown-demo">
<summary>List links</summary>
  <ul class="dropdown">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Longer action text</a></li>
  </ul>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary>List buttons</summary>
  <ol class="dropdown">
    <li><button>Option 1</button></li>
    <li><button>Option 2</button></li>
    <li><button>Option 3</button></li>
  </ol>
  <div class="close-dropdown"></div>
</details>

Button styles (anchor)

The '.btn' utility from the forms & buttons can be used on <summary> elements:

Links

Body

Example HTML

<details name="dropdown-demo">
<summary class="btn">Links</summary>
  <div class="dropdown">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary class="btn">Body</summary>
  <div class="dropdown-body">
    <h3>With heading</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <a href="#">Link to action</a>
  </div>
  <div class="close-dropdown"></div>
</details>

Light & dark (anchor)

Fixed color-scheme utilities included with the backgrounds.

Links light

Body light

Links dark

Body dark

Example HTML

<details name="dropdown-demo" class="light">
<summary class="btn">Links light</summary>
  <div class="dropdown">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo" class="light">
<summary class="btn">Body light</summary>
  <div class="dropdown-body">
    <h3>With heading</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <a href="#">Link to action</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo" class="dark">
<summary class="btn">Links dark</summary>
  <div class="dropdown">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo" class="dark">
<summary class="btn">Body dark</summary>
  <div class="dropdown-body">
    <h3>With heading</h3>
    <p>The quick brown fox jumps over the lazy dog.</p>
    <a href="#">Link to action</a>
  </div>
  <div class="close-dropdown"></div>
</details>

Primary colors (anchor)

The dropdowns color classes use the primary colors variables, the source file is included separately.

Source file: src/css/colors/color-dropdowns.css
View on GitHub: https://github.com/pmbrown/ming-css/blob/main/src/css/colors/color-dropdowns.css

Included with:

ming.css
ming.min.css

Primary

Success

Danger

Info

Warning

Secondary

Example HTML

<details name="dropdown-demo">
<summary class="btn btn-primary">Primary</summary>
  <div class="dropdown-primary">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary class="btn btn-success">Success</summary>
  <div class="dropdown-success">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary class="btn btn-danger">Danger</summary>
  <div class="dropdown-danger">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary class="btn btn-info">Info</summary>
  <div class="dropdown-info">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary class="btn btn-warning">Warning</summary>
  <div class="dropdown-warning">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

<details name="dropdown-demo">
<summary class="btn btn-secondary">Secondary</summary>
  <div class="dropdown-secondary">
    <a href="#">Action</a>
    <a href="#">Another action</a>
    <a href="#">Longer action text</a>
  </div>
  <div class="close-dropdown"></div>
</details>

Previous: Dialogs

Next: List groups