Bulma - 下拉列表

上一个
下一个

说明

Bulma 针对使用列表格式显示相关链接的情况提供了可切换的下拉列表菜单。你需将基类作为.dropdown与以下下拉列表元素配合使用：

序号 标记和说明
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 - it returns the element within the document that matches the specified selector
                  var dropdown = document.querySelector('.dropdown');
                    
                  //addEventListener - attaches an event handler to the specified element.
                  dropdown.addEventListener('click', function(event) {
                    
                     //event.stopPropagation() - it stops the bubbling of an event to parent elements, by preventing parent event handlers from being executed
                     event.stopPropagation();
                      
                     //classList.toggle - it toggles between adding and removing a class name from an element
                     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>

它显示了以下结果：

上拉

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.htm
打印页面
上一个
下一个
广告