<!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. [Chromium文档转载，第004章]Mojo Synchronous Calls

    For Developers‎ > ‎Design Documents‎ > ‎Mojo‎ > ‎ Synchronous Calls Think carefully before ...

  2. Spring Cloud学习笔记【一】Eureka服务注册与发现

    Spring Cloud Eureka 是 Spring Cloud Netflix 微服务套件的一部分,基于 Netflix Eureka 做了二次封装,主要负责完成微服务架构中的服务治理功能,服务 ...

  3. 洛谷 P1239 计数器

    P1239 计数器 题目描述 一本书的页数为N,页码从1开始编起,请你求出全部页码中,用了多少个0,1,2,…,9.其中—个页码不含多余的0,如N＝1234时第5页不是0005,只是5. 输入输出格式 ...

  4. 【分享】School Rumble校园迷糊大王PSP姐姐事件+PS2游戏第一,二学期【带VNR翻译教程】

    7/22/2014 TUE   为「スクールランブル 姉さん事件です」加入了BANDAI PSP的引擎. 校园迷糊大王PSP姐姐事件 下载地址1:http://www.bego.cc/file/689 ...

  5. WIN10 10招

    还有不到两个月的时间,7 月 29 日 Windows 10 就将正式公布,在此之前已经有不少的用户已经使用上了 Windows 10 的预览版.对于那些苦等 Windows 10 的用户来说,幸福非 ...

  6. 分享一个vue常用的ui控件

      vue学习文档 http://www.jianshu.com/p/8a272fc4e8e8 vux github ui demo:https://github.com/airyland/vux M ...

  7. 分享一下10个常用jquery片段

      1. 图片预加载 (function($) { var cache = []; // Arguments are image paths relative to the current page. ...

  8. C++ 补课（一）

    1,在C语言中,全局变量必须声明在所有的函数之前,局部变量必须声明在所有可执行语句之前: C++ 允许在代码块的任何位置对局部变量进行声明 2,常量定义方面,C语言 #define 可能因计算的优先级 ...

  9. 使用Java语言开发微信公众平台(六)——获取access_token

             在前四期的文章中,我们分别学习了“环境搭建与开发接入”.“文本消息的接收与响应”.“被关注回复与关键词回复”.“图文消息的发送与响应”等环节.那么,从本篇博文开始,我们将进去更高级的 ...

  10. 阅读笔记—EL表达式

    表达式语言(EL) 表达式语言是一种在JSP页面中使用的数据访问语言,通过它可以很方便地在JSP页面中访问应用程序数据. 使用EL访问数据 表达式语言的使用形式:              ${exp ...