<!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. Alternating Sum

    http://codeforces.com/problemset/problem/963/A 不考虑正负的话,每两项之间之间公比为b/a,考虑正负,则把k段作为循环节,循环节育循环节之间公比为(b/a ...

  2. Java:网络传输

    网络以字节码传输 String s = "我恨你"; //转成字节: byte[] brr = s.getBytes();//gbk //iE:utf-8 String s1 = ...

  3. MongoDB常用操作整理

    Mongodb:是一种NoSQL数据库,NoSQL:Not Only SQLSQL: 数据表->JDBC读取->POJO(VO.PO)->控制层转化为JSON数据->客户端 这 ...

  4. 学习参考《TensorFlow深度学习》高清中文版PDF+英文版PDF+源代码

    我们知道,TensorFlow是比较流行的深度学习框架,除了看手册文档外,推荐大家看看<Tensorflow深度学习>,共分5方面内容:基础知识.关键模块.算法模型.内核揭秘.生态发展.前 ...

  5. 开启mysql远程服务

    1.在开始里输入远程,选择允许从这台机器访问 2.选择第二个开启 3. 打开cmd, 进入mysql中更改mysql数据库下的user表,中的root用户的Host 为 ‘%’use mysql:up ...

  6. [Python] Execute a Python Script

    Python scripts can be executed by passing the script name to the python command or created as execut ...

  7. [Python] Check for None (Null) in Python

    If you’ve used other programming languages, you may have learned that an empty object is not the sam ...

  8. 设置eclipse中的字体大小

  9. 3.Maven之（三）Maven插件

    转自:https://yq.aliyun.com/ziliao/312162 Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,像编译是通过maven- ...

  10. POJ 3051 DFS

    题意:判断连通块大小 水题 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm ...