<!DOCTYPE HTML>

 <html>

   <head>

      <meta charset="utf-8">

      <title>从上到下的菜单动画</title>

      <style>

            body {

     margin: ;

     font-family: 'Lato', sans-serif;

 }

 .overlay {

     height: %;

     width: %;

     position: fixed;

     z-index: ;

     top: ;

     left: ;

     background-color: rgb(,,);

     background-color: rgba(,,, 0.9);

     overflow-y: hidden;

     transition: .5s;

 }

 .overlay-content {

     position: relative;

     top: %;

     width: %;

     text-align: center;

     margin-top: 30px;

 }

 .overlay a {

     padding: 8px;

     text-decoration: none;

     font-size: 36px;

     color: #;

     display: block;

     transition: .3s;

 }

 .overlay a:hover, .overlay a:focus {

     color: #f1f1f1;

 }

 .overlay .closebtn {

     position: absolute;

     top: 20px;

     right: 45px;

     font-size: 60px;

 }

     </style>

   </head>

    <body>

      <div class="overlay ">

        <a href="#" class="closebtn" onclick="closes()">&times;</a>

        <ul class="overlay-content" >

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

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

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

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

          <li><a href="#">NODE.JS</a></li>

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

        </ul>

      </div>

      <h1>

        从上到下的菜单动画,为保证全屏，要把菜单脱离文档流

      </h1>

      <span style="font-size:90px" onclick="show()">&#;点击打开</span>

 <script>

 function closes() {

    document.getElementsByClassName("overlay")[].style.height="0%";

 }

 function show(){

   document.getElementsByClassName("overlay")[].style.height="100%";

 }

 </script>

   </body>

 </html>

JS/CSS 全屏幕导航 – 从上到下动画的更多相关文章

  1. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  3. iis 发布asp.net mvc 网站时候js css 压缩问题，图片不加载问题

    一.JS CSS 自动压缩问题 默认情况下mvc这个框架会把css,js文件压缩成一个js或者css文件,一会发现只有一个<link href="/Content/css?v=ji3n ...

  4. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  6. js上三行下三行和添加多个附件

    function addTr(num) { no ++; var obj = document.getElementById(tableID); var oneRow = obj.insertRow( ...

  7. 史上前端面试最全知识点（附答案）---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  8. JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

    $(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; ; i & ...

  9. js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...

随机推荐

  1. AtCoder Beginner Contest 067 C - Splitting Pi

    C - Splitting Pile Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement Snu ...

  2. Flex4之事件详解

    第一.Flex事件简介 事件贯穿于Flex应用开发的全过程.事件是ActionScript .0中最重要的部分之一,也是Flex应用程序开发的核心基础.本章将在DOM 3的基础上详细讲解ActionS ...

  3. Swift学习笔记(12)--数组和字典的复制

    Swift中,数组Array和字典Dictionary是用结构来实现的,但是数组与字典和其它结构在进行赋值或者作为参数传递给函数的时候有一些不同. 并且数组和字典的这些操作,又与Foundation中 ...

  4. 03013_JDBC工具类

    1.“获得数据库连接”操作,将在以后的增删改查所有功能中都存在,可以封装工具类JDBCUtils.提供获取连接对象的方法,从而达到代码的重复利用. 2.该工具类提供方法:public static C ...

  5. 怎样用redis实现分布式锁

    引子 redis作为一个强大的key/value数据库.事实上还能够用来实现轻量级的分布式锁. 1.实现方案1 最早官方在SETNX命令页给了一个实现: acquire lock: SETNX loc ...

  6. Socket编程中的强制关闭与优雅关闭及相关socket选项

    以下描述主要是针对windows平台下的TCP socket而言. 首先需要区分一下关闭socket和关闭TCP连接的区别,关闭TCP连接是指TCP协议层的东西,就是两个TCP端之间交换了一些协议包( ...

  7. 上市公司恋上互联网金融 目前已有14家涌入P2P

    时至今日,互联网金融已蔚然成风,诸多上市公司正前赴后继介入到P2P业务中,据记者初步统计,目前至少有14家A股上市公司参与了P2P业务.央行6月份的报告显示,中国当前有600多家P2P公司,交易额达到 ...

  8. cf1089d Distance Sum

    题目大意 给一个有n个点,m条边的无向连通图,求所有点两两之间的最短路.$(2<=n<=10^5;n-1<=m<=n+42)$ solution 我们注意到$m-n+1$很小. ...

  9. reboot---重启Linux系统

    reboot命令用来重新启动正在运行的Linux操作系统. 语法 reboot(选项) 选项 -d:重新开机时不把数据写入记录文件/var/tmp/wtmp.本参数具有“-n”参数效果: -f:强制重 ...

  10. Matlab piecelin

    function v = piecelin(x,y,u) %PIECELIN Piecewise linear interpolation. % v = piecelin(x,y,u) finds t ...