js (单个的)点击式下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container {
overflow: hidden;
background-color: #333;
font-family: Arial;
} .container a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
} .dropdown {
float: left;
overflow: hidden;
} .dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
} .container a:hover, .dropdown:hover .dropbtn {
background-color: red;
} .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 {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
} .dropdown-content a:hover {
background-color: #ddd;
} .show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<a href="#home">主页</a>
<a href="#news">新闻</a>
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">下拉菜单</button>
<div class="dropdown-content" id="myDropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div> <h3>导航栏中的下拉菜单</h3>
<p>点击按钮显示下拉菜单</p>
</body>
</html>
<script>
/* 点击按钮,下拉菜单在 显示/隐藏 之间切换 */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
} // 点击下拉菜单意外区域隐藏
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
单个的点击展示下拉菜单比较简单。比如点击右上角的设置按钮会弹出修改密码和退出功能等。
多个的点击式下拉菜单导航:https://www.cnblogs.com/mzzone/p/10994867.html
js (单个的)点击式下拉菜单的更多相关文章
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- Mega Dropdown - 带子分类的响应式下拉菜单
当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...
- 有序无序Ul->Li Ol->Li菜单,默认点击当前弹出下拉,再次点击收起下拉菜单(变形2 ---修饰)
从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...
- js 导航栏多项点击显示下拉菜单代码
<!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...
- 点击含下拉菜单的列表/表单按钮:通过JS创建虚拟按钮并点击
${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0 ...
- 有序无序ul->li ol->li菜单,默认点击当前弹出下拉,再次点击收起下拉菜单
实现这一效果利用css和js技术结合 以ul->li为例子 <!DOCTYPE html><html lang="en"><head> & ...
- Extjs grid禁用头部点击三角下拉菜单
表格头部的三角在点击的时候禁止出现下拉菜单,给每一列添加属性menuDisabled:true xtype:'grid', enableColumnResize:false, columns:[ {t ...
- js实现网站导航的二级下拉菜单
http://www.codesky.net/article/201109/1200js/%E5%AE%9E%E7%94%A8%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95. ...
- js相关小实例——div实现下拉菜单
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
随机推荐
- 华为云ModelArts2.0来袭
[摘要] modelarts自发布以来,不断地更新增加新的功能来为AI工程师们带来新的服务,在这次的全联接大会上EI服务产品部总经理贾永利宣布--华为云AI重装升级,并重磅发布一站式AI开发管理平台M ...
- “洞察千里”,华为云HiLens如何让无人车智行天下
作者:华为云 Rosie 随着人工智能的普及和渗透,"无人"的场景越来越丰富,无人超市.无人车.无人机等已经融入我们的生活. 乘着这股热浪,华为云携手上海交通大学学生创新中心举办了 ...
- [TimLinux] JavaScript 判断 input checkbox选中的方法
1. input属性 <label> <span>选择</span> <input type="checkbox" name=" ...
- 利用Python爬虫轻松挣外快的几个方法(值得收藏)
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:小猿猿er 在下写了10年Python,期间写了各种奇葩爬虫,挣各种奇葩 ...
- [golang] nats的消息传递模型介绍
目录 nats的消息传递模型 What is NATS 主题式消息(Subject-Based Messaging) 发布订阅(Publish-Subscribe) 请求应答(Request-Repl ...
- 【Web技术】337- 秒懂 Web 缓存
点击上方"前端自习课"关注,学习起来~ 最近把前端缓存重新整理了一下,从整体的层面上把前端所有能用的缓存方案梳理了一遍.同时,对于http缓存,使用了表格的方案,使得原先晦涩难记的 ...
- Python 命令行之旅:使用 click 实现 git 命令
作者:HelloGitHub-Prodesire HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
- 分布式事务解决方案,中间件 Seata 的设计原理详解
作者:张乘辉 前言 在微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响 ...
- 真伪随机数 ——Random和SecureRandom
Random Random用来创建伪随机数.所谓伪随机数,是指只要给定一个初始的种子,产生的随机数序列是完全一样的. 要生成一个随机数,可以使用nextInt().nextLong().nextFlo ...
- 十年Java程序员-带你走进Java虚拟机-类加载机制
类的生命周期 1.加载 将.class文件从磁盘读到内存 2.连接 2.1 验证 验证字节码文件的正确性 2.2 准备 给类的静态变量分配内存,并赋予默认值 2.3 解析 类装载器装入类所引用的其它所 ...