<!DOCTYPE html>

 <html>

    <head>

        <meta charset = "utf8">

        <title>JS实现下拉菜单的功能</title>

        <style>

            .mynav>ul{

                list-style-type:none;

                padding:0;

          }

          .mynav>ul>li{

                float:left;

                margin:10px 20px ;

                color:white;

               }

          .mynav>ul>li>a{

             text-decoration:none;

             color:white;

             }

           .dropdown-m{

                position:absolute;

                z-index:99;

                list-style:none;

                margin-top:10px;

                padding:10px;

                font-size:20px;

                border:0px solid black;

                float: none;

                display:none;

                box-shadow: 10px 10px 5px #888888;

                background:lightblue;

            }

           .dropdown-m a{

                text-decoration:none;

                color:white;

                padding:10px;

                width:100px;

                display: block;

          }

          .dropdown-m li:hover{

             background:blue;

          }

          .content{

                margin:40px;

            }

          button{

                cursor: pointer;

                border: none;

                outline: none;

                color: white;

                background-color: inherit;

         }

          .show{

           display:block;//用于class切换

            }

        </style>

    </head>

    <body>

         <div class="container" style="background:lightgrey;height:800px">

             <nav class="mynav" style="background:black;">

                <ul>

                   <li><a href="#">首页</a></li>

                   <li><a href="#">WEB</a></li>

                   <li><a href="#">算法</a></li>

                   <li >

                          <button onclick="showtoggle()">前端内容</button>

                         <ul class="dropdown-m" id="dropdown">

                             <li><a href="#">HTML</a><li>

                             <li><a href="#">CSS</a><li>

                             <li><a href="#">JavaScript</a><li>

                             <li><a href="#">node.js</a><li>

                          </ul>

                  </li>

                </ul>

                <div  style="clear:both"></div>

             </nav>

             <div class="content">

                   <dl>

                       <dt>js简介<dt>

                           <dd> JavaScript 是脚本语言</dd>

                           <dd>JavaScript 是一种轻量级的编程语言。</dd>

                           <dd>JavaScript 是可插入 HTML 页面的编程代码。</dd>

                           <dd> JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。</dd>

                           <dd> JavaScript 很容易学习。</dd>

                   <dl>

             </div>

         </div>

        <script>

           //实现切换，hover也是可以，不用这么麻烦

            function showtoggle(){

               document.getElementById("dropdown").classList.toggle("show");

             }

 //点击其他区域也关闭

           window.onclick=funtuion=function(e){

                if(!e.target.matches("button")){

                    var dropdown = document.getElementById("dropdown");

                  if (dropdown.classList.contains('show')) {

                     dropdown.classList.remove('show');

 }}

          }

        </script>

    </body>

 </html>

JS实现下拉菜单的功能的更多相关文章

  1. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. js 联动下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js模拟下拉菜单-键盘、鼠标（代码详解）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. bootstrap和JS实现下拉菜单

    // bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type= ...

  6. 使用EXCEL设置“下拉菜单”选项功能

    原创作品.出自 "深蓝的blog" 博客.欢迎转载.转载时请务必注明出处,否则有权追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlo ...

  7. js实现下拉菜单

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. js二级下拉菜单

    看似简单的一个菜单,确需要不少的知识点 1. getByClass getElementsByClassName 已经有大部分现代浏览器支持了,只有ie6,ie7,ie8是不支持的.所以对ie6,7, ...

  9. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

随机推荐

  1. nginx的Rewrite重写

        location /{                if ($remote_addr=192.168.1.100){                          //禁止此 ip 访问 ...

  2. 新机器的vim配置

    最近一直用vim去写acm代码,算是一种练习吧. 用着用着感觉不错,最近也稍微配置了一下vim,用着更舒服了 键盘映射 ESC<->CapsLock 我们知道vim有自带的键盘映射命令,但 ...

  3. Linux 下安装 redis 详情

    一:将redis 压缩包上传到 Linux  usr/local下 (一):在local 下创建一个 redis 目录 (二):上传redis压缩包到此目录下. 二:Linux 进入 local目录下 ...

  4. WPS for Linux使用测评

    从去年有WPS for Linux的消息到现在,Linux 版的WPS Office在经过一系列的alpha版本之后终于迎来了Beta版本.笔者也是第一时间下载安装,WPS 文字.WPS 演示和WPS ...

  5. python Web抓取（一）[没写完]

    需要的模块: python web抓取通过: webbrowser:是python自带的,打开浏览器获取指定页面 requests:从因特网上下载文件和网页 Beautiful Soup:解析HTML ...

  6. OpenJDK源码研究笔记(八)-详细解析如何读取Java字节码文件(.class)

    在上一篇OpenJDK源码研究笔记(七)–Java字节码文件(.class)的结构中,我们大致了解了Java字节码文件的结构. 本篇详细地介绍了如何读取.class文件的大部分细节. 1.构造文件  ...

  7. rac重新启动遭遇ORA-01078、ORA-01565、ORA-17503、ORA-12547

    今天測试环境server重新启动导致一个节点集群无法重新启动,遭遇ORA-12547错误.详细例如以下: server重新启动后,rac1集群无法启动,rac2正常启动: [root@rac1 ~]# ...

  8. Android开发之Volley网络通信框架

    今天用了一下Volley网络通信框架,感觉挺好用的,写个博客记录一下用法.方便以后VC. Volley(Google提供的网络通信库,能使网络通信更快,更简单,更健壮.) 功能模块: 1. JSON, ...

  9. caioj1443:第k小的数Ⅲ

    [传送门:caioj1443] 简要题意: 给出一颗n个点的树,给出每个点的权值,再给出n-1条边,有m个询问,每个询问输入x,y,k,输出第x节点到第y节点的路径上第k大的点 题解: 这是一道主席树 ...

  10. Lesson 1 Basic Concepts: Part 2

    Getting your web site ‘live’ on the Web With the nerd background details under our belts, we can now ...