Css 简明教程
CSS - Dropdowns
下拉菜单是一个包含选项列表的用户界面元素。它允许用户通过将鼠标悬停在触发元素上或单击触发元素来从列表中选择一个值。通常在导航菜单、表单和其他网站交互组件中使用。
下拉菜单使用 HTML’s unordered list (<ul>) 和列表项 (<li>) 元素创建。
本章将介绍利用 CSS 对下拉菜单元素进行样式设置和排列、控制其外观和行为。
CSS Dropdown - Basic Example
我们来看一个带有选项列表的下拉菜单的简单示例。当你将鼠标悬停在“选择一个选项”文本上时，会出现一个带有选项的下拉菜单。
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 10px 20px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
margin: 0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span class="dropdown-button">Select an Option</span>
<div class="dropdown-menu">
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
</div>
</div>
</body>
</html>在上面的示例中：
-
使用任何 HTML 元素（例如 <span> 或 <button>）打开下拉菜单内容。
-
若要创建下拉菜单内容或菜单，请使用容器元素（如 >div<
-
使用 CSS 正确包裹和定位下拉菜单内容。
-
.dropdown 类使用 position:relative。此属性将下拉菜单置于下拉按钮正下方（使用 position:absolute）。
-
.dropdown-menu class holds the actual dropdown content. It is hidden by default, and will be displayed on hover.
-
CSS box-shadow 属性让下拉菜单看起来像一张卡片。
-
:hover 选择器在用户将鼠标移至下拉按钮上时显示下拉菜单。
CSS Dropdown - Hoverable Effect
可悬停下拉列表用户界面元素，当用户将光标悬停在触发器元素上时，将出现下拉菜单。当用户将光标从触发器元素上移开时，下拉菜单通常会消失。
我们看一个示例。此示例在下拉框内使用锚标记，并将它们样式化为适合样式化下拉按钮：
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>CSS Dropdown - Clicked Dropdowns
单击下拉列表时，它会展开以显示可用选项，你可以单击选项之一来选择它们。
我们看一个示例：
<html>
<head>
<style>
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const button = document.querySelector('.dropdown-button');
const dropdownContent = document.querySelector('.dropdown-menu');
button.addEventListener('click', function () {
dropdownContent.classList.toggle('show');
});
window.addEventListener('click', function (event) {
if (!event.target.matches('.dropdown-button') && dropdownContent.classList.contains('show')) {
dropdownContent.classList.remove('show');
}
});
});
</script>
</body>
</html>CSS Dropdown - Right-aligned Menu
你可以通过将 float: right 样式应用于 <div> 来将下拉菜单放在屏幕右侧（其中包含下拉菜单）。此排列将菜单移至屏幕的右侧。
我们看一个示例：
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
</style>
</head>
<body>
<div class="dropdown" style="float: right;">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>CSS Dropdown - Left-aligned Menu
你可以通过将 float: left 样式添加到 <div> 来实现左对齐下拉菜单（其中包含下拉菜单）。此排列将菜单移至屏幕的最左侧。
我们看一个示例：
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-button {
background-color: #e81a1a;
padding: 15px;
border: none;
cursor: pointer;
color: #ffffff;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
}
.dropdown-menu li {
padding: 10px;
background-color: #15AD39;
}
.dropdown-menu li a {
display: block;
text-decoration: none;
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu li:hover {
background-color: #82ea32;
}
</style>
</head>
<body>
<div class="dropdown" style="float: left;">
<button class="dropdown-button">Select an Option</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>
</div>
</body>
</html>CSS Dropdown - With Image
你可以通过在文本选项旁边包含图像来增强下拉列表。当将鼠标悬停在图像上时，将显示较大的图像以及描述。
我们看一个示例：
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-img-menu {
display: none;
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
}
.dropdown:hover .dropdown-img-menu {
display: block;
}
.img-descripition {
padding: 15px;
background-color: rgb(38, 222, 53);
text-align: center;
}
</style>
</head>
<body>
<div class="dropdown">
<img src="images/red-flower.jpg" alt="Cinque Terre" width="200" height="100">
<div class="dropdown-img-menu">
<div class="img-descripition">Red color flower</div>
<img src="images/red-flower.jpg" alt="Cinque Terre" width="300" height="150">
</div>
</div>
</body>
</html>CSS Dropdown - With Navbar
在 Website 导航菜单中常见下拉式导航栏。它包括一个包含链接列表的水平栏。当用户将鼠标悬停在特定链接上或单击特定链接时，会显示一个下拉菜单，显示其他导航选项或与所选链接相关的其他内容。
我们看一个示例：
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #208926;
}
li {
float: left;
}
li a,
.dropdown-option {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropdown-option {
background-color: #f39a1d;
}
li.dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #44e2d5;
border: 1px solid #ccc;
padding: 0;
margin: 0;
list-style: none;
width: 120px;
}
.dropdown-menu a {
color: black;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: #ee3131;
}
.dropdown:hover .dropdown-menu {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Tutorialspoints</a></li>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-option">Articles</a>
<div class="dropdown-menu">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Bootstrap</a>
</div>
</li>
</ul>
</body>
</html>