<!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. [动图演示]Redis 持久化 RDB/AOF 详解与实践

    Redis 是一个开源( BSD 许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件.它支持的数据类型很丰富,如字符串.链表.集 合.以及散列等,并且还支持多种排序功能. 什么叫持 ...

  2. 成功build Maven但eclipse中依然显示该工程有错误

    在mac pro的控制台中,成功执行 mvn package,但该工程在eclipse仍然显示有错误. 解决办法:右键该工程 -> Maven -> Update project,勾选 F ...

  3. [TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍

    1. onfocus事件 input框获取到焦点时,触发了该事件,比如获取到焦点时,修改input框的背景色.这个功能其实可以使用css的伪类:focus来定义. 2. onblur事件 这个与onf ...

  4. BZOJ 1003[ZJOI2006]物流运输(SPFA+DP)

    Problem 1003. -- [ZJOI2006]物流运输 1003: [ZJOI2006]物流运输 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: ...

  5. 洛谷 题解 P2296 【寻找道路】

    Problem P2296 [寻找道路] solution 首先声明,这题我用了spfa,而: 关于spfa:它死了. 杀手: NOI 2018−T1 出题人 感谢出题人,没有卡spfa 用时: 20 ...

  6. B.Obtain Two Zeroes

    题目:包含两个零 题意:你被给予两个数a和b,你可以对这两个数进行操作 每次操作你可以选择任意的正整数x,可以进行a = a - x,b = b - 2x或者a = a - 2x,b = b - x两 ...

  7. Spring整合Shiro 权限 角色 用户关系分析

    Spring整合Shiro 权限 角色 用户关系分析 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 前置内容 之前我们学习了,使用注解的方式去完成权限的控制,当然,也是静态的,也就 ...

  8. python3导入子模块

    基础知识 参考资料1上有一句话Regular packages are traditional packages as they existed in Python 3.2 and earlier. ...

  9. 笔记||Python3之函数

    函数:          函数的概念:就是一段代码:一段操作流程. 优点:代码量少.简洁.   维护起来方便 -- 在函数的定义进行修改 函数的定义:1 - def 函数名(): 函数内容 2 - 函 ...

  10. tensorflow学习笔记——VGGNet

    2014年,牛津大学计算机视觉组(Visual Geometry Group)和 Google DeepMind 公司的研究员一起研发了新的深度卷积神经网络:VGGNet ,并取得了ILSVRC201 ...