189 8069 5689
对于定位的侧栏导航点击滑入滑出这一效果，我想很多人都明白原理，并且很简单的就能运用JS+Jquery就能做出。而且是一个非常常见的简单效果。在此呢，小码哥只是为了自己以后能够翻看，还有就是给那些刚入门javascript的新人们一点启发。
10年积累的做网站、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有温宿免费网站建设让你可以放心的选择与我们合作。
作为入门javascript的人来说，明白一个效果是怎么实现的尤为重要。即原理是怎么回事尤为重要！小码哥昨天在路上偶遇一应届毕业生，刚从青岛来北京找工作。是学计算机的，C及C++起步，由此基础，我说你学什么语言都有优势。必定逻辑基础有了不是！？
废话不说了，直接上码：
HTML代码：
CSS代码：
/*S sidebar*/
.sidebar{width:200px;padding:100px 0 0 0;height:100%;position:fixed;left:-200px;top:0;background:#0e0e0e;_position:absolute;_height:1275px;z-index:999;}
.sidebar .side_btn{position:absolute;width:62px;height:153px;right:-57px;top:320px;}
.sidebar .side_btn a{display:block;width:62px;height:153px;}
.sidebar .side_btn2{display:none;}
.sidebar .side_btn1 .s_btn1{background:url(../p_w_picpaths/sidebar-btn.png) 0 0;}
.sidebar .side_btn2 .s_btn2{background:url(../p_w_picpaths/sidebar-btn.png) -62px 0;}
.side_main{width:179px;margin:0 auto;}
.side_main .side_hd{display:block;width:179px;height:61px;background:url(../p_w_picpaths/sidebar-hd.jpg);}
.side_main .side_nav{width:100%;margin-top:50px;}
.side_main .side_nav li a{display:block;width:179px;height:51px;background:url(../p_w_picpaths/sidebar-bg.png) 0 0;text-align:center;line-height:51px;font-size:15px;color:#e6c1a7;}
.side_main .side_nav li a:hover{background:url(../p_w_picpaths/sidebar-bg.png) 0 -51px;color:#ffce4a;}
JS代码：
/*左侧导航*/
$('.side_btn1').click(function(){
$('.sidebar').animate({left:"0px"},1000,function(){
$('.side_btn1').hide();
$('.side_btn2').show();
});
});
$('.side_btn2').click(function(){
$('.sidebar').animate({left:"-200px"},1000,function(){
$('.side_btn2').hide();
$('.side_btn1').show();
});
});
配图：
load-btn.png
sidebar-btn.png
sidebar-hd.jpg
这是其中用到的图片，及按钮背景图。
如果不想用上述图片的，可以根据代码中图片的尺寸，自己换用其他图片。
再有就是，在该效果中，涉及到了JS Jquery中的动画animate方法。不了解的码农们希望能自己学习！
其中原理就是控制模块的left值。
希望能对大家有所帮助。哇嘎嘎