| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | <script>var dropdown = document.querySelector('.dropdown'); | ||
| + | dropdown.addEventListener('click', function(event) { | ||
| + | event.stopPropagation(); | ||
| + | dropdown.classList.toggle('is-active'); | ||
| + | });</script> | ||
<section class="section tot"> | <section class="section tot"> | ||
<div class="container"> | <div class="container"> | ||
| Line 7: | Line 12: | ||
<div class="dropdown is-active"> | <div class="dropdown is-active"> | ||
<div class="dropdown-trigger"> | <div class="dropdown-trigger"> | ||
| − | <button class="button" aria-haspopup="true" aria-controls="dropdown- | + | <button class="button" aria-haspopup="true" aria-controls="dropdown-menu"> |
| − | <span> | + | <span>Dropdown button</span> |
<span class="icon is-small"> | <span class="icon is-small"> | ||
<i class="fas fa-angle-down" aria-hidden="true"></i> | <i class="fas fa-angle-down" aria-hidden="true"></i> | ||
| Line 14: | Line 19: | ||
</button> | </button> | ||
</div> | </div> | ||
| − | <div class="dropdown-menu" id="dropdown- | + | <div class="dropdown-menu" id="dropdown-menu" role="menu"> |
<div class="dropdown-content"> | <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"> | <hr class="dropdown-divider"> | ||
<a href="#" class="dropdown-item"> | <a href="#" class="dropdown-item"> | ||
| − | + | With a divider | |
</a> | </a> | ||
</div> | </div> | ||