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

浏览数：28 / 时间：2015年06月11日 
<!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>

 

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

手机端左侧固定导航栏推出效果,,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢