<!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. pod install/update速度慢或失败的解决方案实践

    本文基于 https://www.cnblogs.com/dabaomo/p/9634727.html 声明 坚决拥护党的领导,本文章所用技术乃出于工作需要,敬请谅解. 正文 可以先过去快速浏览一遍再 ...

  2. Git的安装和使用教程详解

    ---恢复内容开始--- 本篇笔记聊聊Git的安装和使用教程 一.认 识 Git                                                            ...

  3. 程序计数器（PC）、堆栈指针（SP）与函数调用过程

    PC(program counter)是CPU中用于存放下一条指令地址的寄存器,SP为堆栈指针.下面将介绍函数调用过程中CPU对PC和SP这两个寄存器的操作. 假设有如下函数Fun Fun() { … ...

  4. 洛谷 题解 P5534 【【XR-3】等差数列】

    我又双叒叕被包菜辣! 题目 这道题是不久前的考试题,现在来水一篇题解 扯回正题 题目很明显的告诉你了,这是一个等差数列, 然后,还告诉你了首项, 第二项, 项数. 你还想咋滴 告诉了你首项和第二项,相 ...

  5. SpringBoot-自动配置原理(七)

    自动配置原理 本节内容分为三个部分 配置文件的写法 分析自动配置原理 @Conditional 一. 配置文件的写法 配置文件可以写什么? 是与/META-INF/spring.factories配置 ...

  6. luogu P4064 [JXOI2017]加法

    题目描述 可怜有一个长度为 n 的正整数序列 A,但是她觉得 A 中的数字太小了,这让她很不开心. 于是她选择了 m 个区间 [li, ri] 和两个正整数 a, k.她打算从这 m 个区间里选出恰好 ...

  7. 回文自动机pam

    目的:类似回文Trie树+ac自动机,可以用来统计一些其他的回文串相关的量 复杂度:O(nlogn) https://blog.csdn.net/Lolierl/article/details/999 ...

  8. UVA-10391 Compoud Words

    You are to find all the two-word compound words in a dictionary. A two-word compound word is a word ...

  9. python学习笔记—DataFrame和Series的排序

    更多大数据分析.建模等内容请关注公众号<bigdatamodeling> ################################### 排序 ################## ...

  10. Asp.net Core dotnet 发布类库文件 带上注释，发布预发行版，带上所有引用

    带上注释 效果图 带上所有引用 效果图 预发行版 效果图 由于微软取消了  project.json  这个json 转而用了csproj 用于保存配置 所以懵逼很大一会 资料来源 project.j ...