Bulma - 下拉菜单

描述

Bulma 提供可切换的下拉菜单，用于以列表格式显示相关链接。您需要将基类用作 .dropdown 以及以下下拉元素 −

您还可以使用锚标记 (<a>) 将 dropdown-item 用作链接。以下示例展示了如何使用上述下拉元素显示基本下拉菜单以及链接到页面中的项目、下拉分隔符 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Basic Dropdown
            </span>
            <br>
            <br>
            
            <div class = "dropdown">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu">
                     <span>Countries</span>
                     <span class = "icon is-small">
                        <i class = "fa 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">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>
            <script>
               //DOMContentLoaded - it fires when initial HTML document has been completely loaded
               document.addEventListener('DOMContentLoaded', function () {
                  // querySelector - 返回文档中与指定选择器匹配的元素
                  var dropdown = document.querySelector('.dropdown');
                    
                  //addEventListener - 将事件处理程序附加到指定元素。
                  dropdown.addEventListener('click', function(event) {
                    
                     //event.stopPropagation() - 通过阻止执行父事件处理程序，它阻止事件冒泡到父元素
                     event.stopPropagation();
                      
                     //classList.toggle - 它在元素中添加和删除类名之间切换
                     dropdown.classList.toggle('is-active');
                  });
               });        
            </script>
         </div>
         
      </section>
   </body>
   
</html>

执行上述代码，您将得到以下输出 −

可悬停下拉菜单

当您将鼠标悬停在 dropdown-trigger 元素上时，下拉菜单组件使用 is-hoverable 类以列表格式显示相关链接。

以下示例指定页面中的可悬停下拉菜单 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Hoverable Dropdown
            </span>
            <br>
            <br>
            
            <div class = "dropdown is-hoverable">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
                     <span>Countries</span>
                     <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">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>
            <script>           
               document.addEventListener('DOMContentLoaded', function () {
                  var dropdown = document.querySelector('.dropdown');
                  dropdown.addEventListener('click', function(event) {
                     event.stopPropagation();                          
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>
         
      </section>
   </body>
   
</html>

它显示以下输出 −

右对齐下拉菜单

Bulma 允许使用 is-right 修饰符显示右对齐下拉菜单，如下例所示 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Right Aligned Dropdown
            </span>
            <br>
            <br>
            
            <div class = "dropdown is-right">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
                     <span>Countries</span>
                     <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">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>
            
            <script>           
               document.addEventListener('DOMContentLoaded', function () {
                  var dropdown = document.querySelector('.dropdown');                         
                  dropdown.addEventListener('click', function(event) {
                     event.stopPropagation();                          
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>
         
      </section>
   </body>
   
</html>

它显示以下输出 −

Dropup

Bulma 允许使用 is-up 修饰符在下拉按钮上方显示下拉菜单，如下例所示−

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Dropup Menu
            </span>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            
            <div class = "dropdown is-up">
               <div class = "dropdown-trigger">
                  <button class = "button" aria-haspopup = "true" aria-controls = "dropdown-menu4">
                     <span>Countries</span>
                     <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">India</a>
                     <a class = "dropdown-item">England</a>
                     <a href = "#" class = "dropdown-item is-active">Australia</a>
                     <a href = "#" class = "dropdown-item">Srilanka</a>
                     <hr class = "dropdown-divider">
                     <a href = "#" class = "dropdown-item">South Africa</a>
                  </div>
               </div>
            </div>
            
            <script>           
               document.addEventListener('DOMContentLoaded', function () {
                  var dropdown = document.querySelector('.dropdown');
                  
                  dropdown.addEventListener('click', function(event) {
                     event.stopPropagation();
                     dropdown.classList.toggle('is-active');
                  });
               });
            </script>
         </div>
         
      </section>
   </body>
   
</html>

它显示以下输出 −

bulma_components.html