<!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. SQL语句查询数据库所有表和所有字段的详细信息（包括表描述和字段描述）

    select (case then ddd.value else '' end ) as "表名(中文)" --如果表名相同就返回空 , (case then d.name els ...

  2. VBA关闭工作簿和退出Excel

    VBA关闭工作簿和退出Excel链接:http://www.excelpx.com/thread-233045-1-1.html 兰色幻想VBA基础入门和高级开发全套80集视频教程,助你成为VBA开发 ...

  3. 统计学习:《贝叶斯思维统计建模的Python学习法》中文PDF+英文PDF+代码

    用数学工具解决实际问题仅有的要求可能就是懂一点概率知识和程序设计.而贝叶斯方法是一种常见的利用概率学知识去解决不确定性问题的数学方法,对于一个计算机专业的人士,应当熟悉其应用在诸如机器翻译,语音识别, ...

  4. C# textBox控件只允许为数字和小数点并且提取出这个数字

    一. textBox控件实现只允许为数字和小数点 如下图所示,在textBox控件框内输入只能是 要在textBox控件属性设置按键按下的事件触发,如下图所示: 二.源代码 textBox控件只允许为 ...

  5. Webhook

    Webhook就是用户通过自定义回调函数的方式来改变Web应用的一种行为,这些回调函数可以由不是该Web应用官方的第三方用户或者开发人员来维护,修改.通过Webhook,你可以自定义一些行为通知到指定 ...

  6. js正則表達式--验证表单

    检測手机号码:/0? (13|14|15|18)[0-9]{9}/ 检測username:(数字,英文,汉字.下划线.中横线):/^[A-Za-z0-9_\-\u4e00-\u9fa5]+$/ pas ...

  7. IT痴汉的工作现状41-亲历招投标

    2015年9月3日早7点,复兴门外大街已是车水马龙.伟仔早早的从东直门赶到这里.呼吸着首都特有的雾气,回味着昨晚与齐天的那一顿簋街麻小,想象着今天的大场面,心中不免有一丝紧张. 今天是个重要的日子,是 ...

  8. java基本的语法

     Java语言发展史 课程大纲: Java语言发展史: 1.sun公司1995年推出,2009年Oracle公司收购sun: 下载: 1.到Oracle官网下载 Java体系与特点 课程大纲: J ...

  9. js数组sort方法详解

    在处理数组的时候,我们有时候需要对数组进行排序,排序的方法有很多种,但是最好最快的就是利用sort方法进行快速的排序. 我们来看一个例子: var arr1 = [6, 3, 4, 1, 2, 5, ...

  10. Zabbix自动发现与自动注册.

    一, 自动发现与自动注册 自动发现? 当场景中出现要添加很多台主机的时候,一台台添加难免太过于繁琐,zabbix提供自动注册,自动发现,可以实现主机的批量添加, zabbix的发现包括三种类型: # ...