文档章节

CSS:CSS 下拉菜单

o
 osc_sj1kgo4z
发布于 2018/04/23 07:14
字数 863
阅读 72
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

ylbtech-CSS:CSS 下拉菜单

 

1.返回顶部
1、

CSS 下拉菜单

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。


下拉菜单实例

实例演示 1

实例演示 2


基本下拉菜单

当鼠标移动到指定元素上时,会出现下拉菜单。

实例

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

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>
尝试一下 »

实例解析

HTML 部分:

我们可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 a <button> 元素。

使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。

使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。

CSS 部分:

.dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片"。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。


下拉菜单

创建下拉菜单,并允许用户选取列表中的某一项:

 

这个实例类似前面的实例,当我们在下拉列表中添加了链接,并设置了样式:

实例

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.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);
}

/* 下拉菜单的链接 */
.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: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>
尝试一下 »

下拉内容对齐方式

float:left;

 

float:right;

如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加以下代码 right: 0;

实例

.dropdown-content {
    right: 0;
}
尝试一下 »

更多实例

图片下拉
该实例演示了如何如何在下拉菜单中添加图片。

导航条下拉
该实例演示了如何在导航条上添加下拉菜单。

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
warn 作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.9K
1
Web开发组件管理器--Bower

Bower 是一个针对Web开发的包管理器。该工具主要用来帮助用户轻松安装CSS、JavaScript、图像等相关包,并管理这些包之间的依赖。 功能有些类似于Component。不同之处是,Component是围绕Git...

匿名
2013/02/01
1.2W
2
网页抓取工具 --pyrailgun

这是一个非常简单易用的抓取工具 怎么使用? 首先你需要创建一个对应站点的规则文件 比如test.json { } 然后在代码里面把它作为一个任务加入到railgun from railgun import RailGun railgun =...

baizhongwei
2013/02/28
7.8K
0
Chrome页面自动刷新插件--smartF5

smartF5是一款chrome插件,用以实现监控页面资源,并自动刷新。 特别适合双屏情况下的DEMO开发,大大提高页面开发效率。 让你键盘上的F5键退休吧! 为什么选择smartF5 本插件具有以下特色: ...

YanisWang
2013/04/04
1.2W
0
jQuery仿亚马逊风格图片滚动插件--amazon_scroller.js

亚马逊是美国甚至是全世界最大的网络电子商务公司,它的网站也相对简单,不花哨。这款图片滚动效果正是模仿自亚马逊网站,自定义参数比较多,可以设置图片滚动间隔、是否显示标题、图片大小、...

dowebok
2013/04/04
2.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

phpstorm 主题颜色

个人比较喜欢 复制文件保存为 red.icls <scheme name="1337" version="142" parent_scheme="Default"> <option name="FONT_SCALE" value="1.0" /> <metaInfo> <property name="c......

chenhongjiang
12分钟前
0
0
Hystrix核心原理和断路器源码解析

Hystrix运行原理 构造一个HystrixCommand或HystrixObservableCommand对象 执行命令。 检查是否已命中缓存,如果命中直接返回。 检查断路器开关是否打开,如果打开,直接熔断,走fallback逻辑...

xiaolyuh
今天
10
0
求职应聘,如何自我分析人格优势?

“你那里有没有合适的工作介绍给我啊?” “我想找份我喜欢的工作,可是好难啊怎么办啊?” “为什么我求职总是不成功呢?” 最近我总是接到朋友询问工作相关的消息,给她们提供招聘信息的同...

蛤蟆丸子
今天
17
0
Pycharm、Idea、Goland 官方汉化来了

作为软件开发的编辑器,不得不提大名鼎鼎的 JetBrains 公司,其出品的软件:Pycharm、Idea、WebStorm、phpstorm、CLion、RubyMine、AppCode、DataGrid,目前来讲都是最受欢迎的! 可是由于软...

猪哥66
今天
18
0
数据分析师必学第一课:构建完整的指标体系

本文分享自微信公众号 - 大数据架构师专家(xinsz08)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

致码高胜寒
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部