<!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. PUBG

    题目描述 最近,喜爱ACM的PBY同学沉迷吃鸡,无法自拔,于是又来到了熟悉的ERANGEL.经过一番搜寻,PBY同学准备动身前往安全区,但是,地图中埋伏了许多LYB,PBY的枪法很差,希望你能够帮他找 ...

  2. 隐私：随机选择 MAC 地址

    隐私:随机选择 MAC 地址 从 Android 8.0 开始,Android 设备在未连接到网络的情况下探测新网络时会使用随机 MAC 地址. 在 Android 9 中,您可以启用开发者选项(默认 ...

  3. python -迭代器与生成器 以及 iterable（可迭代对象）、yield语句

    我刚开始学习编程没多久,对于很多知识还完全不知道,而有些知道的也是一知半解,我想把学习到的知识记录下来,一是弥补记忆力差的毛病,二也是为了待以后知识能进一步理解透彻时再回来做一个补充. 参考链接: 完 ...

  4. 再谈CLR查找和加载程序集的方式

    原文:再谈CLR查找和加载程序集的方式 这是一个老问题,以前也有朋友写过一些文章介绍,但可能还不是很全面.我也多次被人问到,这里结合案例再次谈谈,希望对大家有所帮助. 本文范例代码可以通过这里下载 h ...

  5. Unity C# 设计模式（一）单例模式

    动机(Motivation):    在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例,才能确保它们的逻辑正确性.以及良好的效率 意图:    保证一个类仅有一个实例,并提供一 ...

  6. 题解 HDU1565 【方格取数(1)】

    给你一个n*n的格子的棋盘,每个格子里面有一个非负数. 从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数的和最大. 题目清晰明了,这道题应该用 ...

  7. Java基础学习总结（10）——static关键字

    一.static关键字 原来一个类里面的成员变量,每new一个对象,这个对象就有一份自己的成员变量,因为这些成员变量都不是静态成员变量.对于static成员变量来说,这个成员变量只有一份,而且这一份是 ...

  8. [Poi] Build a Vue App with Poi

    Poi uses the Vue babel presets by default, so there is no additional install required to get up-and- ...

  9. 编程算法 - 篱笆修理(Fence Repair) 代码(C)

    篱笆修理(Fence Repair) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 把一块木板切成N块, 每次切两块, 分割的开销是木板长度, ...

  10. Spring MVC数据转换

    样例:把一个字符串封装而一个对象. 如:username:password格式的数据ZhangSan:1234.我们把这个数据封装成一个User对象.以下分别使用属性编辑器与转换器来实现. 1.自己定 ...