<!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. XML结构，写到TreeView树上

    http://blog.csdn.net/ztzi321/article/details/44077563

  2. 【Linux下禁用rm命令之建立回收站】

    第一步 创建回收站目录 # 根据自己的习惯,找个位置创建一个用作回收文件的目录 # 我们这里将在root目录下面创建一个名为".trash"的隐藏文件 [root@fedora ~ ...

  3. cogs 1396. wwww

    1396. wwww ☆   输入文件:wwww.in   输出文件:wwww.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 对于一个递归函数w(a,b,c) 如果 ...

  4. 父类与子类的virtual

    父类加了virtual,子类不需要加virtual,多余.加了也不会报错. 父类中不是virtual,子类是virtual,那么父类中的不是虚函数,子类及子子类的派生类中该函数才是虚函数

  5. 63.C++异常

    #include <iostream> using namespace std; //异常与错误不一样,异常一般能正常工作 //错误就是程序无法正常工作,无法编译 //异常让程序在错误的输 ...

  6. Impala SQL

    不多说,直接上干货! 其实,跟hive差不多,大家可以去参考我写的hive学习概念系列. Impala SQL VS HiveQL 下面是Impala对基础数据类型和扩展数据类型的支持 • 此外,Im ...

  7. C++ 补课 （三）

    1,枚举类型 —— 下标自0开始 enum 枚举类型名 { 常数表 } 2,C++ 的异常处理机制实际上是一种运行时通知机制 3,delete p;只是删除指针p指向内存区,并不是删除指针p,所以p还 ...

  8. C/C++(基础-常量，类型转换)

    字符 char ascII码表 #include<stdio.h> int main() { unsigned char ch; for(ch = 0;ch < 128;ch++) ...

  9. RPC简易学习

    0.RPC简介 RPC,   英文全称:Remote Process Call.   中文全称:远程过程调用. 客户端通过网络请求调用远程服务端对外暴露服务.常用的两种RPC协议:TCP.HTTP. ...

  10. gdal读写图像分块处理

    转自赵文原文 gdal读写图像分块处理(精华版) Review: 用gdal,感觉还不如直接用C++底层函数对遥感数据进行处理.因为gdal进行太多封装,如果你仅仅只是Geotif等格式进行处理,IO ...