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
列印頁面
上一個
下一個
廣告
© . All rights reserved.