<!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. 浅谈css样式之list-type

    在我们的工作学习中,大多数人使用列表标签的时候总一般的选择是把list-type设置成none.不过可能很多人对于这个属性的细节并没有很深的了解.甚至会把list-type和list-type-sty ...

  2. shell脚本sed awk

    删除第一行 sed '1d' test.txt 假装执行 sed -i '1d' test.txt 执行 从第二行删除到行尾 sed '2,$d' test.txt sed -i '2,$d' tes ...

  3. 整合多个maven工程时Spring配置加载JDBC问题

    问题叙述: 两个工程都通过JDBC访问mysql数据库,各自运行OK, 但合并成一个maven工程后,发现前一个工程访问数据库异常,貌似拿不到自己的DAO. 解决办法: 发现这两个工程的xml配置中, ...

  4. luogu P4065 [JXOI2017]颜色 |随机化+前缀和

    题目描述 可怜有一个长度为 n 的正整数序列 Ai,其中相同的正整数代表着相同的颜色. 现在可怜觉得这个序列太长了,于是她决定选择一些颜色把这些颜色的所有位置都删去. 删除颜色 i 可以定义为把所有满 ...

  5. openstack网络（四）-虚机流量分析

    几种网络名词解释 使用LinuxBridge时虚机流量分析 VLAN FLAT Local VXLAN 使用OVS时虚机流量分析 几种网络名词解释 1.local网络:local网络是与其他网络和节点 ...

  6. [TimLinux] Python 装饰器

    1. 装饰器 一种语法格式,用于替换另外一个编码风格,一种语法糖,通过语法结构明确标识出这样一种语法. 自动在被装饰对象尾部执行代码(不使用装饰器语法时,需要明确写明的代码) 被装饰对象可以为函数.类 ...

  7. TypeScript - 泛型

    什么是泛型 官方是这样介绍的: 软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性. 组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵 ...

  8. Ceph 介绍及原理架构

  9. windows程序设计03_读取utf8文件

    这里用到的读取utf8文件的思路特别朴素.先把utf8文件按char读取到内存里.因为utf8是变长的,为了处理方便,在内存里把char转化成wchar_t,这样一个字符就是一个wchar_t.把ut ...

  10. 用span写一个特殊样式的1

    用span写一个如下样式的 1 span { display: inline-block; width: 17px; height: 17px; background: var(--themeColo ...