【CSS 14】dropdowns 下拉菜单下拉式图像下拉式导航

Zanebla

于 2023-07-01 11:02:15 发布

阅读量641

点赞数 1

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/m0_62629457/article/details/131466051

版权

CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS

- - dropdowns 下拉菜单

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;
}

下拉式图像
如何在下拉框中添加图像和其他内容
请把鼠标指针悬停在图像上

<!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>

综合：下拉式导航

<!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>

Zanebla

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【CSS 14】dropdowns 下拉菜单下拉式图像下拉式导航

【CSS 14】dropdowns 下拉菜单下拉式图像下拉式导航z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。1. auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0。/*不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失*/
复制链接

扫一扫