<!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. sql习题--转换(LEFT/RIGTH)

    /* 转换为100-5 0100-000051-998 0001-0099812-1589 0012-01589*/IF EXISTS(SELECT * FROM sys.objects WHERE ...

  2. Python3基础笔记--生成器

    目录: 一.列表生成器 二.生成器 三.迭代器 一.列表生成器 a = [x for x in range(10)] b= [y*2 for y in range(10)] def f(n) retu ...

  3. 一篇文章教会你理解Scrapy网络爬虫框架的工作原理和数据采集过程

    今天小编给大家详细的讲解一下Scrapy爬虫框架,希望对大家的学习有帮助. 1.Scrapy爬虫框架 Scrapy是一个使用Python编程语言编写的爬虫框架,任何人都可以根据自己的需求进行修改,并且 ...

  4. 【agc004f】Namori Grundy

    那个问一下有人可以解释以下这个做法嘛,看不太懂QwQ~ Description 有一个n个点n条边的有向图,点的编号为从1到n. 给出一个数组p,表明有(p1,1),(p2,2),…,(pn,n)这n ...

  5. windows下用winscp的root连接ubuntu“拒绝访问”的解决方法

    转载:https://www.cnblogs.com/weizhxa/p/10098640.html 解决: 1.修改ssh配置文件:sudo vim etc/ssh/sshd_config 在#Pe ...

  6. zabbix4.0 使用nginx前端安装

    注:环境需求:centos7 1.安装阿里云yum源: rpm -ivh https://mirrors.aliyun.com/zabbix/zabbix/4.1/rhel/7/x86_64/zabb ...

  7. head---显示文件的开头的内容

    head命令用于显示文件的开头的内容.在默认情况下,head命令显示文件的头10行内容. 语法 head(选项)(参数) 选项 -n<数字>:指定显示头部内容的行数: -c<字符数& ...

  8. 以替换为主的疯狂填词、sub()介绍

    去年接到一个任务,一直给拖到了今天,再这么下去可不行,今天我就要让你们看看我的厉害 任务是这样的:创建一个程序,读入文本文件,并让用户在该文本出现ADJECTIVE .NOUN.ADVERB或VERB ...

  9. EF数据迁移命令

    在包管理器控制台中输入命令“enable-migrations”,然后按Enter键!Visual Studio将生成一个名为“Configurations.cs”的文件; 你可以安全地忽略它,但你需 ...

  10. 关于自适应的矩形css布局

    在面试中遇到的问题,做一个自适应的宽高2:1的矩形,这个问题考察了padding的细节,padding-bottom的百分比值,相对的是该盒模型的height,设置矩形之后,里面的内容如果太多会溢出, ...