Difference between revisions of "Sandbox-Dropdown-Menu"

 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
<script>
+
<script>var dropdown = document.querySelector('.dropdown');
var dropdown = document.querySelector('.dropdown');
 
 
dropdown.addEventListener('click', function(event) {
 
dropdown.addEventListener('click', function(event) {
 
   event.stopPropagation();
 
   event.stopPropagation();
 
   dropdown.classList.toggle('is-active');
 
   dropdown.classList.toggle('is-active');
});
+
});</script>
</script>
 
 
     <section class="section tot">
 
     <section class="section tot">
 
       <div class="container">
 
       <div class="container">
Line 14: 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-menu2">
+
     <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
       <span>Content</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 21: Line 19:
 
     </button>
 
     </button>
 
   </div>
 
   </div>
   <div class="dropdown-menu" id="dropdown-menu2" role="menu">
+
   <div class="dropdown-menu" id="dropdown-menu" role="menu">
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
       <div class="dropdown-item">
+
       <a href="#" class="dropdown-item">
         <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
+
         Dropdown item
       </div>
+
      </a>
       <hr class="dropdown-divider">
+
      <a class="dropdown-item">
       <div class="dropdown-item">
+
        Other dropdown item
         <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
+
       </a>
       </div>
+
       <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">
         This is a link
+
         With a divider
 
       </a>
 
       </a>
 
     </div>
 
     </div>

Latest revision as of 10:12, 13 May 2018