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>

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

查看全文

相关阅读:
杂记
 [POI2015]PUS
CF786B Legacy（线段树优化建图）
SP11470 TTM
[WC2010]重建计划
 [HNOI2014]世界树
 luogu P4842 城市旅行
 [SDOI2016]征途
 [APIO2014]序列分割
 上下界网络流构图证明

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