translateX -100% 怎么隐藏横向滚动条？<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>闻</title> <style> *{margin:0;padding:0;transition:all .3s;} .nav p{border-bottom:2px solid #fff;width:20px;margin-bottom:5px;} .nav{ float:right;margin-right:15px;margin-top:15px; } .active{ transform:translateX(-100px); } .nva-menu{ position:absolute; top:0;right:0;width:100px; transform:translateX(100%); transition:all .3s; background-color:#000; height:100%; } .nva-menu ul{ list-style-type:none;
} .nva-menu ul li{ padding:0 15px 15px 15px; } .nva-menu ul li a{ color:#fff; } </style> </head> <body> <div style="height:50px;background-color:#00f"> <div class="nav"><p/><p/><p/> <div class="nva-menu"> <ul> <li><a href="">首页</a></li> <li><a href="">客服服务</a></li> <li><a href="">下载中心</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul> </div> </div> </div> <img style="width:100%;" src="http://e.hiphotos.baidu.com/image/pic/item/11385343fbf2b211bff58476ce8065380cd78e2a.jpg"/> <footer> <div class="foot" style="text-align:center;margin-top:30px;background-color:#eee;padding-top:15px;padding-bottom:15px;"> <div class="pagecontent"> <p>RSS（聚合内容）</p> <p>Copyright © 2015 Inc. All Rights Reserved.</p> <p>豫ICP备0000000号-2 版权所有</p> </div> </div> </footer><script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script><script> $(function(){ $(".nav").click(function(){ if($("body").hasClass("active")){ $("body").removeClass("active"); }else{ $("body").addClass("active"); } }) });</script></body></html>
1 回答
- 1 回答
- 0 关注
- 3609 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消