パッチワークの完全なA「フロントエンドフレーム」（3） - サイドバー

EDITORIAL

パッチワークの完全な背景「フロントエンドフレーム」（1） - レイアウト
アイコンフォント-パッチワークは、バックグラウンド「フロントエンドフレーム」（2）完成
導入プロジェクトを
font-awesome

    <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />

iconfontカスタムアイコン

    <link href="css/icon.css" rel="stylesheet" />

全体的なフレームワークの重要な部分は、サイドバーのメニューを来ました。

サイドバー

アニメーションを折りたたみます

私たちができるアニメーションといえばjQuery、css3上で、達成するために、アニメーションの実装ではありません、詳細に以下の簡単な概要を説明しました：css3jQuery

CSS3の使用のGPU、jQueryのは、CPUを使用して

jQueryのよりCSS3のスムーズな、より速く、より効率的に

jQueryのブラウザはすべてサポートしています

CSS3（アニメーション、トランジション）IE6サポートしていない、7、8、9

CSS3アニメーションより柔軟に

要約すると、することをお勧めしますcss3アニメーション効果を介して達成することができ、アニメーション効果を達成するための移行とアニメーションの特性、ここで私がしようとしtransitionたアニメーションを実現するためのプロパティを、
1.トランジションのプロパティを定義します

.ls-layout .ls-layout-slider {
    width: 200px;
    height: 100vh;
    border: none;
    background: #1f242a;
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
    -webkit-transition: width 300ms ease;
    transition: width 300ms ease;
    opacity: 1;
    z-index: 9;
}

2.サイドバーの收起スタイル

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

.ls-layout-slider.contracted .header span {
    height: 0px;
    overflow: hidden;
}

3. jsが変化するclass性質を

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);

4.参照してください効果

メニュー

メニューは比較的簡単ですが、最初は木であります：
css

.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;
}

html

...
    <ul>
        <li class="node-container node-container-root">
            <a pid="1" class="node node-root" onclick="page.expand(this)">
                <i class="fa fa-cog fa-fw" aria-hidden="true"></i>
                <span>系统管理</span>
                <b class="expandable fa fa-angle-left" aria-hidden="true"></b>
            </a>
            <ul class="node-container-son">
                <li>
                    <a pid="2" class="node " onclick="javascript:void(0);">
                        <i class="fa fa-list fa-fw" aria-hidden="true"></i>
                        <span>菜单管理</span>
                    </a>
                </li>
                <li>
                    <a pid="7" class="node " onclick="javascript:void(0);">
                        <i class="fa fa-shield fa-fw" aria-hidden="true"></i>
                        <span>权限管理</span>
                    </a>
                </li>
                <li>
                    <a pid="12" class="node " onclick="javascript:void(0);">
                        <i class="fa fa-user fa-fw" aria-hidden="true"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li>
                    <a pid="17" class="node " onclick="javascript:void(0);">
                        <i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i>
                        <span>操作管理</span>
                    </a>
                </li>
                <li>
                    <a pid="22" class="node " onclick="javascript:void(0);">
                        <i class="fa fa-trophy fa-fw" aria-hidden="true"></i>
                        <span>角色管理</span>
                    </a>
                </li>

            </ul>
        </li>
        <li class="node-container node-container-root">
            <a pid="44" class="node node-root" onclick="page.expand(this)">
                <i class="fa fa-copy fa-fw" aria-hidden="true"></i>
                <span>日志</span>
                <b class="expandable fa fa-angle-left" aria-hidden="true"></b>
            </a>
            <ul class="node-container-son">
                <li>
                    <a pid="45" class="node " onclick="javascript:void(0);">
                        <i class="fa fa-list-alt fa-fw" aria-hidden="true"></i>
                        <span>日志管理</span>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
...

収縮パターンの後に：

.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);
}

結果を参照してください。

基本的には、歓迎の批判を完了しました。

パッチワークの完全なA「フロントエンドフレーム」（3） - サイドバー

EDITORIAL

サイドバー

アニメーションを折りたたみます

メニュー

おすすめ