Material Design的主布局

写在前面：
这是一篇菜鸟的学习笔记。

好久没写学习笔记了。说好的学习呢，难不成又成为一次信誓旦旦的开始一曝十寒的结束?！还是多多少少记录点什么吧。

好了，继续我的My Material Design系列的DIY。今天写的是一个主布局效果——Sidebar的实现。先来看看效果吧：

MainLayout.gif

MainLayout链接展示

实现思路

1.首先是float控制的左右两个布局——sidebar和main布局，以及一个screen的布局。

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滚动*/
}

附上源码：

MainLayout示例代码