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>

查看全文

相关阅读:
【stanford】梯度、梯度下降，随机梯度下降
 ［philosophy］空间
 【crawler】heritrix 3 使用
 【database】database domain knowledge
【java】Java异常处理总结
 【computer theory】一、集合、关系和语言
 【java】ubuntu部署web项目war包到tomcat上
 【MachineLeaning】stanford lesson one
【数据立方】由表和电子数据表到数据立方体，cuboid方体
 PHP变参函数的实现

原文地址：https://www.cnblogs.com/jiqing9006/p/5091546.html