6

Pure CSS Bulma Dropdown Toggle

 2 years ago
source link: http://siongui.github.io/2018/10/02/css-only-toggle-bulma-dropdown/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Pure CSS Bulma Dropdown Toggle

October 02, 2018

CSS only toggle Bulma dropdown. No JavaScript required. If you prefer to use JavaScript to toggle dropdown, see [2]. Click the following dropdown to see the demo of pure css toggle.

To toggle Bulma dropdown with JavaScript, add the is-active class to the class attribute of the dropdown to activate the modal. The is-active class make the dropdown-menu visible via display: block. We will use this hint in our CSS toggle.

We will apply the technique of Pure CSS Toggle HTML Element [3] here. We need:

1 - Visible HTML label elements, which is the dropdown-trigger.

2 - Invisible HTML input checkbox elements, referenced by the label elements via for attribute.

3 - dropdown-menu, which is to be toggled and invisible in the beginning.

When users click on the visible label elements, the corresponding input checkbox element is checked. We use CSS3 :checked selector to select corresponding dropdown menu and make it visible.

The complete source code is as follows:

HTML:

<!-- you can put the two following lines in your html head -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" integrity="sha256-zKA1Bf41O96+gJSlkn/Bh2HATW/OhwkApPlYTp3B5O8=" crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>

<div class="dropdown">
  <input id="dropdown-toggle" type="checkbox" />

  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <label for="dropdown-toggle">Dropdown button</label>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item">
        Other dropdown item
      </a>
      <a href="#" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

CSS:

#dropdown-toggle {
  display: none;
}

#dropdown-toggle:checked ~ #dropdown-menu {
  display: block;
}
  • The first rule hides the input checkbox.
  • The magic is in second rule. We use :checked and general sibling selector (~) to make the dropdown menu visible.

Tested on:

  • Bulma 0.7.1
  • Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)

References:

[1]Dropdown | Bulma: a modern CSS framework based on Flexbox


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK