zoukankan      html  css  js  c++  java

  • jquery+css实现菜单收缩效果并适应多种浏览器与移动平台

    效果

    出现

    css部分

    .content-wrapper{
    -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, margin .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, margin .3s ease-in-out;
    transition: transform .3s ease-in-out, margin .3s ease-in-out;
    margin-left: 230px;
    z-index: 820
}


@media (max-767px) {
    .content-wrapper{
        margin-left: 0
    }
}

@media (min-768px) {
    .sidebar-collapse .content-wrapper {
        margin-left: 0
    }
}

@media (max-767px) {
    .sidebar-open .content-wrapper{
        -webkit-transform: translate(147px, 0);
        -ms-transform: translate(147px, 0);
        -o-transform: translate(147px, 0);
        transform: translate(147px, 0)
    }
}

.content-wrapper{
    min-height: 100%;
    background-color: #ecf0f5;
    z-index: 800
}

/* 关键处 */
.main-sidebar{
    position: absolute;
    top: 60px;
    padding-top: 0px;
    min-height: 100%;
    width: 145px;
    z-index: 810;
    -webkit-transition: -webkit-transform .3s ease-in-out, width .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out, width .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out, width .3s ease-in-out;
    transition: transform .3s ease-in-out, width .3s ease-in-out
}
/* 关键处 */
@media (max-767px) {
    .main-sidebar{
        -webkit-transform: translate(-150px, 0);
        -ms-transform: translate(-150px, 0);
        -o-transform: translate(-150px, 0);
        transform: translate(-150px, 0)
    }
}

@media (min-768px) {
    .sidebar-collapse .main-sidebar{
        -webkit-transform: translate(-150px, 0);
        -ms-transform: translate(-150px, 0);
        -o-transform: translate(-150px, 0);
        transform: translate(-150px, 0)
    }
}

@media (max-767px) {
    .sidebar-open .main-sidebar{
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0)
    }
}

    html部分

    <body>
        <div class="top">
            <span class="sidebar-toggle glyphicon glyphicon-th-list category_list" aria-hidden="true"></span>
        </div>
        <!--中间-->
        <div id="" class="mid">
            <!--中间左边-->
            <div id="" class="left main-sidebar">
                main-sidebar
            </div>
            <!--中间右边-->
            <div id="" class="clear">
            </div>
            <div id="" class="right content-wrapper">
                 content-wrapper
            </div>
        </div>
    </body>

    jQuery部分

    <script type="text/javascript">

    //Enable sidebar toggle
    $(document).ready(function() {
        $('.sidebar-toggle').click(function() {
            if ($("body").hasClass('sidebar-collapse')) {
                $("body").removeClass('sidebar-collapse');
            } else {
                $("body").addClass('sidebar-collapse');
            }

            if ($("body").hasClass('sidebar-open')) {
                $("body").removeClass('sidebar-open').removeClass('sidebar-collapse');
            } else {
                $("body").addClass('sidebar-open');
            }
        });

        $(".content-wrapper").click(function() {
            if ($("body").hasClass("sidebar-open")) {
                $("body").removeClass('sidebar-open');
            }
        });
    });
    </script>
  • 相关阅读:
    【bzoj1036】【ZJOI2008】树的统计
    AE基础(8)PageLayout属性设置和添加元素
    AE基础(7)布局控件与地图控件关联
    UtilityAction扩展
    UtilityAction
    AE基础(6)数据查询与选择
    NavigationAction
    LayerAction
    AE基础(5)鹰眼功能
    AE基础(4)画几何图形
  • 原文地址：https://www.cnblogs.com/jiqing9006/p/5091546.html
Copyright © 2011-2022 走看看