Bulma - 下拉菜单

描述

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

Sr.No	标签 &描述
1	dropdown 它是一个主容器，用于包装下拉菜单。
2	dropdown-trigger 它是表格的顶部，包含表格标题行的元素。
3	dropdown-menu 它是一个可切换的菜单，包含相关链接。
4	dropdown-content 它指定下拉菜单带有白色背景的框。
5	dropdown-item 它定义下拉菜单中的每个项目。
6	dropdown-divider 它指定用于划分下拉菜单项目的水平线。

您还可以使用锚标记 (<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

Bulma 教程

Bulma 有用资源

Bulma - 下拉菜单

描述

可悬停下拉菜单

右对齐下拉菜单

Dropup

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！