<!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. 【Python成长之路】词云图制作

    [写在前面] 以前看到过一些大神制作的词云图 ,觉得效果很有意思.如果有朋友不了解词云图的效果,可以看下面的几张图(图片都是网上找到的): 网上找了找相关的软件,有些软件制作 还要付费.结果前几天在大 ...

  2. 使用Spring Data JPA的Specification构建数据库查询

    Spring Data JPA最为优秀的特性就是可以通过自定义方法名称生成查询来轻松创建查询SQL.Spring Data JPA提供了一个Repository编程模型,最简单的方式就是通过扩展Jpa ...

  3. Internet History,Technology,and Security - History Through Supercomputing（Week2）

    时间飞逝,一周又过去了,这周我们来到了Internet History, Technology and Security (Week 2)的学习,从标题就可以看出,这周主要是介绍“互联网”雏形的诞生. ...

  4. The file “XXX.app” couldn’t be opened because you don’t have permission to view it.问题修复

    出现下列问题 怎么解决呢 如图 将info.plist的文件中的Executable.file中的文件修改为:$(PRODUCT_NAME) 重新编译 com+R不出意外的话 运行成功 ok 解决~

  5. Spring Boot 整合Spring Data以及rabbitmq，thymeleaf，向qq邮箱发送信息

    首先得将自己的qq开启qq邮箱的POP3/SMTP服务 说明: p,e为路由key. 用户系统完成登录的时候,将{手机号-时间-IP}保存到队列Phone-queue中,msg-sys系统获得消息打印 ...

  6. mysql主从复制原理及实践

    Mysql主从复制原理及实践 mysql主从框架       MySQL主从架构是MySQL集群中最基本也是最常用的一种架构部署,能够满足很多业务需求,常见的有一主一从或者一主多从.可以防止单一主机的 ...

  7. LightOj-1027 A Dangerous Maze(期望)

    You are in a maze; seeing n doors in front of you in beginning. You can choose any door you like. Th ...

  8. 菜鸟系列docker——docker网络(8)

    Docker网络 Docker在容器内部运行应用,这些应用之间的交互依赖于大量不同的网络,这意味着Docker需要强大的网络功能. Docker 网络从覆盖范围可分为单个 host 上的容器网络和跨多 ...

  9. linux google protobuf

    说明: protobuf已经全面迁移到github,地址:https://github.com/google/protobuf 直接下载2.6.1版本:https://github.com/googl ...

  10. 关于《iBoard 电子学堂》的学习及进阶方式（精 转）

    关于<iBoard 电子学堂>的学习及进阶方式 <iBoard 电子学堂>自发布以来,受到广大网友的热烈关注.虽然我前期设计我花了大量精力,但能得到大家的认可,我也非常欣慰.由 ...