<!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. UVa 729 The Hamming Distance Problem【枚举排列】

    题意:给出数组的长度n,给出h,表示这个数组里面含有h个1,求其所有的排列 用next_permutation就可以了 #include<iostream> #include<cst ...

  2. SSD-tensorflow-2 evaluation

    测试就是用voc2007的test set来测试已经训练好的checkpoint的mAP,github上提供了三个已经训练好的model的checkpoint checkpoint 里面已有的300_ ...

  3. ES6学习笔记（十九）Module 的语法-export和import

    1.概述 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require.Pyt ...

  4. Linux权限管理（用户、组、文件管理）

    一. Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示. 1. 文件查看类命令cat,tac, head, tail, more, less, ls ,file: -ls : l ...

  5. 把握linux内核设计思想（三）：下半部机制之软中断

    [版权声明:尊重原创.转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途]         中断处理程序以异步方式执行,其会打断其它重要代码,其执行时该中 ...

  6. 使用maven运行单元測试总结

    maven本身没有单元測试框架,可是maven的default生命周期的test阶段绑定了maven-surefire-plugin插件,该插件能够调用Junit3.Junit4.TestNG等Jav ...

  7. 《Spring技术内幕》笔记-第四章 Spring MVC与web环境

    ​上下文在web容器中的启动 1,IoC容器的启动过程 IoC的启动过程就是建立上下文的过程.该上下文是与ServletContext相伴.在Spring中存在一个核心控制分发器,Dispatcher ...

  8. JNI学习积累之二 ---- 数据类型映射、域描述符说明

    本文原创,转载请注明出处:http://blog.csdn.NET/qinjuning 在Java存在两种数据类型: 基本类型 和 引用类型 ,大家都懂的 . 在JNI的世界里也存在类似的数据类型,与 ...

  9. Array 对象常用的方法总结

    shift:删除原数组的第一项,返回删除元素的值:如果数组为空则返回undefined var arr = [1, 2, 3, 4, 5]; var out = arr.shift(); consol ...

  10. decimal.ToString("#0.00")与decimal.ToString("#.##")的区别

    decimal decTemp = 2.1m; Console.WriteLine(decTemp.ToString("#0.00")); //输出2.10 Console.Wri ...