写在前面：
这是一篇菜鸟的学习笔记。
好久没写学习笔记了。说好的学习呢，难不成又成为一次信誓旦旦的开始一曝十寒的结束?！还是多多少少记录点什么吧。
好了，继续我的My Material Design系列的DIY。今天写的是一个主布局效果——Sidebar的实现。先来看看效果吧：
MainLayout.gif
实现思路
1.首先是float控制的左右两个布局——sidebar和main布局，以及一个screen的布局。
<body>
<div class="mmd-screen"></div>
<div class="mmd-sidebar"></div>
<div class="mmd-main"></div>
</body>
2.然后是通过监听屏幕大小的变化来判断是否切换为sidebar隐藏模式
//监听屏幕变化
$(window).resize(function(){
if($(this).width() < 980){
//do someting
}
else{
//do someting
}
});
3.最后是小屏幕情景下通过按钮和screen点击事件来开闭sidebar
//导航栏开启事件
$(".mmd-menu-btn").click(function(){
//do soemthing
})
//导航栏关闭事件
$(".mmd-screen").click(function(){
//do soemthing
})
注意的地方
1.对于sidebar的布局，添加了一个效果：活得鼠标焦点时才能开启滑动功能（通过overflow属性控制）：
//监听导航栏是否获取焦点
$(document).on("mouseover mouseout",".mmd-sidebar",function(e){
if(e.type == "mouseover"){
$(this).css("overflow","auto");
}else{
$(this).css("overflow","hidden");
}
})
2.打开/关闭sidebar的效果使用最简单的动画：
//打开导航栏
function openSidebar(){
$(".mmd-sidebar").animate({left:'0px'},400);
}
//关闭导航栏
function closeSidebar(){
$(".mmd-sidebar").animate({left:'-250px'},400);
}
3.为了使sidebar固定在屏幕中，不随main滑动，sidebar的position属性需要设置为fixed：
.mmd-sidebar{
position: fixed;/*不随右边div滚动*/
}
