<!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. 记录一次Permission denied解决过程

    热烈推荐:超多IT资源,尽在798资源网 朋友网站碰到一个奇怪的问题,程序所在目录无法进行上传操作. 具体细节是这样的:网站所在目录 /www/web/xiangmua 路径下,/www/web 都可 ...

  2. HDU-1032 The 3n+1 problem 模拟问题（水题）

    题目链接:https://cn.vjudge.net/problem/HDU-1032 水题 代码 #include <cstdio> #include <algorithm> ...

  3. vmware启动虚拟机报错VMware Workstation has paused this virtual machine because the disk on which the virtual machine is stored is almost full. To continue, free an additional 1.4 GB of disk space.

    报错VMware Workstation has paused this virtual machine because the disk on which the virtual machine i ...

  4. ArcGIS api for javascript——图形-增加图形到地图

    描述 本例展示了如何使用Draw工具栏在地图上描绘许多种类的几何体.ArcGIS JavaScript API包含工具栏. 工具栏不是一个在页面上自动地可见的用户界面组件.相反,工具栏是一个助手类,可 ...

  5. 第二十四天 框架之痛-Spring MVC(四）

    6月3日,晴."绿树浓阴夏日长. 楼台倒影入池塘. 水晶帘动微风起, 满架蔷薇一院香". 以用户注冊过程为例.我们可能会选择继承AbstractController来实现表单的显示 ...

  6. 千千万万的IT开发project师路在何方

    已经找不到该文章的最初出处了,有找到的人请告诉我.谢谢~~ 千千万万的IT开发project师路在何方 2007-06-25 21:41 恭喜,你选择开发project师作为自已的职业! 悲哀.你选择 ...

  7. Perl Learning 5 Hash

    [本文原创,未经同意请勿转载] 哈希是一种数据结构,它和数组的相似之处在于能够容纳随意多的值并能按需取用,而它和数组的不同在于索引方式,数组是以数字来索引.哈希则以名字来索引.也就是说.哈希的索引值, ...

  8. sc命令以及InstallUtil安装service

    1.安装 https://stackoverflow.com/questions/8164859/install-a-windows-service-using-a-windows-command-p ...

  9. Linux 内核源码（kernel source）

    查看内核的发行版:uname -r(--kernel-release) $ uname -r 4.4.0-78-generic 内核源码所在的位置:/usr/src $ cd /usr/src $ l ...

  10. POJ 3256 DFS水题

    枚举点 每次都搜一遍 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> ...