dropdowns 下拉菜单
使用 CSS 创建可悬停的下拉列表
基础的下拉菜单
创建当用户将鼠标移到元素上时出现的下拉框
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none; /*不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失*/
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
/*
z-index属性是用来设置元素的堆叠顺序或者叫做元素层级,z-index的值越大,元素的层级越高
当元素发生重叠时,层级高的元素会覆盖在层级低的元素的上面,使层级低的元素的重叠部分被遮盖住
z-index属性的值分为三种
1. auto(默认值):与父元素的层级相等,如各级祖先元素均未设置该属性,则类似于0
2. number:整数数值,在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584,数值越大,层级越高,数值越小,层级越低
3. inherit:继承父元素的z-index的属性值
*/
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<h1>可悬停的下拉菜单</h1>
<p>将鼠标移到文本上即可查看下拉内容</p>
<div class="dropdown">
<span>请将鼠标移到我的上面</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
更多说明
HTML
使用任何元素打开下拉菜单内容,例如 <span> 或 <button> 元素
使用容器元素(如 <div>)创建下拉内容,并在其中添加任何内容
使用 <div> 元素包围这些元素,使用 CSS 正确定位下拉内容
CSS
.dropdown 类使用 position:relative,当我们希望将下拉内容放置在下拉按钮的正下方(使用 position:absolute)时,需要使用该类
.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的,并将在悬停时显示
注意,min-width 设置为 160px,可随时更改此设置
如果您希望下拉内容的宽度与下拉按钮的宽度一样,请将宽度设置为 100%
设置 overflow:auto 可实现在小屏幕上滚动
使用 CSS box-shadow 属性,而不是边框,这样下拉菜单看起来像一张“卡片”
当用户将鼠标移到下拉按钮上时,:hover 选择器用于显示下拉菜单
下拉式菜单
创建一个下拉菜单,并允许用户从列表中选择一个选项
本例与上例相似,除了我们在下拉框内添加链接并为其设置了样式,以此匹配下拉按钮的样式
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50; /*green更深,而#4CAF50浅亮*/
color: white;
padding: 12px; /*填充内边距,让按钮更大同时与文本更协调*/
font-size: 16px;
border:none; /*按钮会自带黑色边框,去掉更好看*/
cursor: pointer; /*鼠标光标变为手指更优美*/
}
.dropdown {
position: relative; /*相对定位,删去好像没影响*/
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2)
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8341;
}
</style>
</head>
<body>
<h1>下拉菜单</h1>
<p>请把鼠标移到按钮上以打开下拉菜单</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<p><b>NOTE:</b>测试链接 href="#",真实的网站会用 URL</p>
</body>
</html>
右对齐的下拉菜单内容
如果希望下拉菜单从右到左而不是从左到右,请添加 right: 0;
.dropdown-content {
right: 0;
}
下拉式图像
如何在下拉框中添加图像和其他内容
请把鼠标指针悬停在图像上文章来源:https://www.toymoban.com/news/detail-521526.html
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px regba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h1>下拉图片</h1>
<p>查看图片</p>
<div class="dropdown">
<img src="/i/photo/coffee.jpg" alt="Coffee" width="100">
<div class="dropdown-content">
<img src="/i/photo/coffee.jpg alt="Coffee" width="300" height="200">
<div class="desc">Coffee</div>
</div>
</div>
<p>hhhhh</p> <!-- 会被遮盖-->
</body>
</html>
综合:下拉式导航文章来源地址https://www.toymoban.com/news/detail-521526.html
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
padding: 14px 16px;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
</body>
</html>
到了这里,关于【CSS 14】dropdowns 下拉菜单 下拉式图像 下拉式导航的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!