<!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>

 

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

版权声明：本文为qiangspecial原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/qiangspecial/p/3910710.html