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

这篇具有很好参考价值的文章主要介绍了【CSS 14】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>

综合:下拉式导航文章来源地址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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【解决】CSS下拉菜单不会显示的问题

    导航栏的下拉菜单不会显示,但按 F5 刷新的一瞬间又能看见下拉菜单的内容,但就是不会显示出来,一开始以为是 js 代码写错或者 css 动画函数的影响,后面找到一篇博客,说这是老生常谈的问题,对于小白确实很难找到问题关键,折腾一晚上终于发现是 层叠关系 的错误。

    2024年02月05日
    浏览(38)
  • ElementUI浅尝辄止28:Dropdown 下拉菜单

    将动作或菜单折叠到下拉菜单中。 移动到下拉菜单上,展开更多操作。 可使用按钮触发下拉菜单。 可以配置 click 激活或者 hover 激活。 可以 hide-on-click 属性来配置。 点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作 Dropdown 组件提供除了默认值以外的

    2024年02月09日
    浏览(61)
  • Vue 中修改 Element 组件的 下拉菜单(Dropdown) 的样式

    今天在项目中碰到一个 UI 改造的需求,需要根据设计图把页面升级成 UI 设计师提供的设计图样式。 到最后页面改造完了,但是 UI 提供的下拉菜单样式全部是黑色半透明的,只能硬着头皮改了。 然后,就有了一下午的头脑风暴。 一开始,我是想着使用 /deep/ 来深度修改样式

    2024年01月17日
    浏览(64)
  • Unity UGUI的Dropdown(下拉菜单)组件的介绍及使用

    Dropdown(下拉菜单)是Unity UGUI中的一个常用组件,用于在用户点击或选择时显示一个下拉菜单,提供多个选项供用户选择。 Dropdown组件由两部分组成:一个可点击的按钮和一个下拉菜单。当用户点击按钮时,下拉菜单会展开,显示所有选项。用户可以通过点击选项来进行选择

    2024年02月13日
    浏览(88)
  • 【unity3D】Dropdown组件 — 如何使用下拉菜单

    💗 未来的游戏开发程序媛,现在的努力学习菜鸡 💦本专栏是我关于游戏开发的学习笔记 🈶本篇是unity的Dropdown组件 介绍:Unity的Dropdown组件是一种UI控件,用于在下拉列表中显示选项或选项组。它允许用户从列表中选择一个选项,并可以在选择时触发特定的行为或事件。通

    2024年02月06日
    浏览(62)
  • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 页面布局设计 “三行模式”或“三列模式” “三行二列”、“三行三列”模式 多行多列复杂模式 导

    2024年02月02日
    浏览(58)
  • 【Unity-UGUI控件全面解析】| Dropdown 下拉菜单组件详解

    🎬 博客主页:https://xiaoy.blog.csdn.net 🎥 本文由 呆呆敲代码的小Y 原创,首发于 CSDN 🙉 🎄 学习专栏推荐:

    2024年02月06日
    浏览(59)
  • Element UI更改下拉菜单el-dropdown-menu样式

    源代码: 这个样式更改还是有点费劲的,如图: 我想更改el-dropdown-item的样式,但是正常覆盖更改无法生效的,从渲染结构可以看出来这个下拉菜单的渲染列表是在文档最底部的。 vue文件新建一个 style样式, 不加scoped; 为保证这个组件的样式 不会影响到其他页面组件样式

    2024年02月09日
    浏览(74)
  • vue+element-ui Dropdown下拉菜单(获取某行数据)

    1、通过command方法直接传当前选中行的整个数据 html js 效果:

    2024年02月16日
    浏览(59)
  • Unity3D邪门实现之GUI下拉菜单Dropdown设计无重复项

    ** Unity3D邪门实现系列为博主在实际开发过程中遇到一些需求,由于个人水平无法正经实现退而采用“歪道”实现同样的效果。** 该系列仅用于分享思路,若有错误或“多此一举”的地方,也请大家多多指正。 利用按钮和下拉菜单结合的形式,点击按钮显示下拉菜单,实现菜

    2024年02月02日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包