東拼西湊完成一個後臺 」前端框架「 (3) - 側邊欄

　　繼續 東拼西湊完成一個後臺 」前端框架「 (1) - 佈局  和 東拼西湊完成一個後臺 」前端框架「 (2) - 字體圖標，項目引入  font-awesome，而後利用 iconfont 建立了幾個圖標：

 

 如今的總體界面是這樣的：

 

 

咱們下面須要完成側邊欄的收起和展開動畫；

這裏用到了 CSS3 的 transition 屬性：

 

 

 

其實咱們須要作的就是 側邊欄的兩種狀態 收起和展開，先把收起的樣式寫出來：

收起： 

.ls-layout .ls-layout-slider.contracted {
    width: 50px;
}

.ls-layout-slider.contracted .header span {
    -webkit-transition: width 300ms ease;
    transition: width 300ms ease;
    height: 0px;
    overflow: hidden;
}

 

 

 咱們須要作的就是利用js代碼給  .ls-layout-slider 加上樣式 contracted , 上代碼：

var page = page || {};
(function($) {
    $.extend(page, {
        slide: function(el) {
            var $el = $(".nav-left .operate-item.slider .ls-icon");
            var slider = $(".ls-layout-slider");
            if (slider.hasClass("contracted")) {
                slider.removeClass("contracted");
                $el.removeClass("ls-icon-shrink-right");
            } else {
                slider.addClass("contracted");
                $el.addClass("ls-icon-shrink-right");
            }
        }
    });
})(jQuery);

看效果：

 

 

 下面是就是側邊的菜單了，思路和頭部樣式的控制是同樣的：

 首先是一個樹：

.slider-menu ul li a:hover {
    text-decoration: none;
}

.slider-menu li ul li a {
    padding: 6px 0px 6px 20px;
}

.slider-menu li ul li ul li a {
    padding: 6px 0px 6px 30px;
}

.slider-menu li ul li ul li ul li a {
    padding: 6px 0px 6px 40px;
}

.slider-menu ul li .node:hover {
    background: rgba(0, 0, 0, .2);
    color: #fff;
}

.selected {
    border-left: 3px solid #1d7ce3;
    background: rgba(0, 0, 0, .5);
}

.selected i,
.selected b,
.selected span {
    color: #fff;
}

.selected-hover {
    border-left: 3px solid #1d7ce3;
}

.slider-menu ul li .selected:hover {
    background: rgba(0, 0, 0, .2);
}

.slider-menu .expandable {
    position: absolute;
    right: 15px;
    line-height: 20px;
}

而後是收起的效果：

.ls-layout-slider.contracted .node-root span {
    display: none;
}

.ls-layout-slider.contracted .node-root b {
    display: none;
}

.ls-layout-slider.contracted .slider-menu .node-root {
    padding: 6px 0;
    text-align: center;
}

.ls-layout-slider.contracted .slider-menu .node-container-root {
    position: relative;
}

.ls-layout-slider.contracted .slider-menu .node-container-son {
    display: none;
    width: 150px;
    position: absolute;
    background: #1f242a;
    padding: 10px;
    padding: 10px;
    border-radius: 4px;
    left: 51px;
    top: 0;
}

.ls-layout-slider.contracted .slider-menu .node-container-root:hover .node-container-son {
    display: block;
}

.ls-layout .ls-layout-slider.contracted input {
    width: 0;
}

.ls-layout .layui-tab-title.contracted .node-container .slider-menu li ul {
    background: rgba(0,0,0,0);
}

看效果：

 

 大功告成 ~ 

 

轉載請註明出處 ： http://www.javashuo.com/article/p-afrglokl-bd.html