zoukankan html css js c++ java

手机端左侧固定导航栏推出效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
    *{margin:0;padding:0;}
    body {
        overflow-x: hidden;
        width: 320px;
    }
    #nav {
        position: fixed;
        left: -100px;
        top: 0;
        width: 100px;
        height: 100%;
        background: #f90;
    }
    #content {
        margin: 0 auto;
        width: 320px;
        height: 3000px;
        background: #666;
    }
    .showNav {
        transform: translateX(100px);
        -webkit-transform: translateX(100px);
        transition: transform 1s;
        -webkit-transition: -webkit-transform 1s;
    }
</style>
</head>
<body>
<div id="nav"></div>
<div id="content">
<input type="button" value="点我试试" id="btn">
</div>
<script>
var oBtn = document.getElementById("btn");

oBtn.onclick = function() {
document.body.className = "showNav";
}
</script>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"> 
<meta content="width=device-width,user-scalable=no" name="viewport"> 
<title>滑动菜单！</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<meta content="width=device-width,user-scalable=no" name="viewport">
<style>
    *{margin:0;padding:0;}
    #nav {
        position: fixed;
        right: -80%;
        top: 0px;
        width: 80%;
        background: #f90;
        height: 800px;
    }
    .showNav {
        transform: translateX(-80%);
        -webkit-transform: translateX(-80%);
    }
    .tansition {
        transition: all 1s;
        -webkit-transition: all 1s;
    }
</style>
</head>
<body class="tansition">
<div>
<input type="button" value="点我试试" id="btn" style="float:right;">
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
11111111111111111111111111111111111111111111111111111 <br>    
</div>
<div id="nav">        
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
22222222222222222222 <br>    
</div>
<script>
var btn = $("#btn");
btn.on("click",function() {

    $("body").toggleClass("showNav");
});
</script>
</body>
</html>

手机端左侧固定导航栏推出效果

查看全文

相关阅读:
C/S和B/S结构区别整理
 JavaScript特点、优缺点及常用框架
 ExtJs特点、优缺点及注意事项
 Oracle SQL 脚本跟踪
 解决 C#中 SQL脚本执行超时问题
 oracle 时间转化函数及常见函数 .
Spring.NET 1.3.2 集成 NHibernate 3.2 1 下载软件
 SQL Server 跨服务器不同数据库之间复制表的数据的方法：
spring.net nhibernate 分布布式事务(上)
set xact_abort ON 你懂的, 在分布式数据库事务中,用到. 在事务中，若出现错误，系统即默认回滚事务

原文地址：https://www.cnblogs.com/qiangspecial/p/3910710.html