| 标签和说明 |
|
dropdown
它是一个主容器，用来包装下拉菜单。
|
|
dropdown-trigger
它是表格的顶部，包含表格标题行的元素。
|
|
下拉菜单
这是一个包含相关链接的可切换菜单。
|
|
dropdown-content
指定白色背景的下拉框。
|
|
dropdown-item
它定义了下拉列表的每个项目。
|
|
dropdown-divider
指定用于分隔下拉项的水平线。
|
<!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>
<!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>
<!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>
<!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>
