<!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 （单个的）点击式下拉菜单的更多相关文章

  1. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  2. Mega Dropdown - 带子分类的响应式下拉菜单

    当你在开发一个内容很多的 Web 项目的时候,最具挑战性的部分之一是为了如果更方便用户浏览这些内容.我们都能想到的一个例子是 Amazon,无限的类别以及它们的子类别.Mega Dropdown 是带 ...

  3. 有序无序Ul->Li Ol->Li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单(变形2 ---修饰)

    从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...

  4. js 导航栏多项点击显示下拉菜单代码

    <!DOCTYPE html> <html> <head> <title>Dropdown</title> <!--<link ...

  5. 点击含下拉菜单的列表/表单按钮：通过JS创建虚拟按钮并点击

    ${JsCode} | Get Element Attribute | XPATH=//table[@class='mnubar']//tr//td//span[text()='${MenuArr[0 ...

  6. 有序无序ul->li ol->li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单

    实现这一效果利用css和js技术结合 以ul->li为例子 <!DOCTYPE html><html lang="en"><head> & ...

  7. Extjs grid禁用头部点击三角下拉菜单

    表格头部的三角在点击的时候禁止出现下拉菜单,给每一列添加属性menuDisabled:true xtype:'grid', enableColumnResize:false, columns:[ {t ...

  8. 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. ...

  9. js相关小实例——div实现下拉菜单

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

随机推荐

  1. javascript实用Date工具

    时间字符串和年月日数据之间的自由转换工具:2018年更新版 上代码: /** * @Desc: 时间处理工具 * @Author: 拿饭盒当烟灰缸 * @Date: 2018-02-27 15:42: ...

  2. 通过哪吒动漫豆瓣影评，带你分析python爬虫与BeautifulSoup快速入门【华为云技术分享】

    久旱逢甘霖 西安连着几天温度排行全国三甲,也许是<哪吒之魔童降世>的剧组买通了老天,从踩着风火轮的小朋友首映开始,就全国性的持续高温,还好今天凌晨的一场暴雨,算是将大家从中暑边缘拯救回来了 ...

  3. Rest微服务案例

    数据库 数据库名称为Product; 创建api子工程,项目名为springcloud_api Product实体类 public class Product implements Serializa ...

  4. Codeves 4279 线段树练习5

    有n个数和5种操作 add a b c:把区间[a,b]内的所有数都增加c set a b c:把区间[a,b]内的所有数都设为c sum a b:查询区间[a,b]的区间和 max a b:查询区间 ...

  5. SpringBoot系列之集成Druid配置数据源监控

    SpringBoot系列之集成Druid配置数据源监控 继上一篇博客SpringBoot系列之JDBC数据访问之后,本博客再介绍数据库连接池框架Druid的使用 实验环境准备: Maven Intel ...

  6. Python绘制KS曲线

    更多大数据分析.建模等内容请关注公众号<bigdatamodeling> python实现KS曲线,相关使用方法请参考上篇博客-R语言实现KS曲线 代码如下: ############## ...

  7. 基于iCamera App Kit 测试oV5640 500w分辨率 摄像头 总结

    基于iCamera App Kit 测试oV5640 摄像头 总结 iCamera App Kit 下载地址 http://pan.baidu.com/s/1kUMIwB1 可以参考下载链接的说明手册 ...

  8. 解密国内BAT等大厂前端技术体系-携程篇（长文建议收藏）

    1 引言 为了了解当前前端的发展趋势,让我们从国内各大互联网大厂开始,了解他们的最新动态和未来规划.这是解密大厂前端技术体系的第四篇,前三篇已经讲述了阿里.腾讯.百度在前端技术这几年的技术发展. 这一 ...

  9. 深入学习CSS3-flexbox布局

    学习博客:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 学习博客:http://caibaojian.com/demo/flexbox ...

  10. SpringSpringBoot上传文件到七牛云

    准备工作 maven pom.xml添加七牛云的sdk依赖 <dependency> <groupId>com.qiniu</groupId> <artifa ...