效果

出现

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-width:767px) {

    .content-wrapper{

        margin-left: 0

    }

}

@media (min-width:768px) {

    .sidebar-collapse .content-wrapper {

        margin-left: 0

    }

}

@media (max-width: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:;

    -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-width:767px) {

    .main-sidebar{

        -webkit-transform: translate(-150px, 0);

        -ms-transform: translate(-150px, 0);

        -o-transform: translate(-150px, 0);

        transform: translate(-150px, 0)

    }

}

@media (min-width: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-width: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>

jquery+css实现菜单收缩效果并适应多种浏览器与移动平台的更多相关文章

  1. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jquery css 主菜单样式的跳转

    想要实现的效果事实上是挺常见的那种:网页的主菜单一開始有一种默认的样式(如A样式),当鼠标经过某一菜单项时.此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时.当前菜单项会套用B样式,其余菜单 ...

  3. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  4. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  7. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  8. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

随机推荐

  1. Android学习中R文件中途消失

    新建工程的时候R文件明明是在的,结果等我做着做着,R.java不见了????于是我就上网查了查,发现,诶,大家都说的几种常见情况都试过了,1.对工程clean一下,选project->clean ...

  2. VB.NET版机房收费系统---七仙女之系统登录

    VB.NET第一版机房收费系统,告一段落,验收的时候.问题也是大大的存在,没实用上设计模式,什么触发器.存储过程,都没实用上.看看其她小伙伴的,七层实现登录?那是什么东东,相比較我的三层而言,多了两倍 ...

  3. [转] vim 正则表达式 很强大

    毋庸多言,在vim中正则表达式得到了十分广泛的应用. 最常用的 / 和 :s 命令中,正则表达式都是不可或缺的. 下面对vim中的正则表达式的一些难点进行说明. 关于magic vim中有个magic ...

  4. Array.asList:数组转list时你一定要知道的“陷阱”！

    最近开发中,业务上处理,经常用到asList方法,这让我不经想起了它的很多容易让人犯错的地方或者误解的地方,所以就想抽出时间来,整理一下,和大家分享出来,深夜了,话不多说,主要以代码为主,简易的代码, ...

  5. linux nohup命令

    nohup 命令 用途:不挂断地运行命令.如果你正在执行一个job,并且你希望在退出帐户/关闭终端之后继续运行,可以使用nohup命令.nohup就是不挂起的意思( no hang up). 语法:n ...

  6. 基于jQuery仿uploadify的HTML5图片上传控件jquery.html5uploader

    (function($){ var methods = { init:function(options){ return this.each(function(){ var $this = $(thi ...

  7. Eclipse下Maven插件配置

    要做一个基于C/S架构的汽车租赁系统,由于在实习期间接触过一些Java和SpringMVC,Spring,Hibernate的东西,所以决定使用这个框架组合来完成这个项目. 首先是Maven的配置,为 ...

  8. 我对Backbone中url属性的理解

    Model中有一个url属性,而且有一个urlRoot属性. Collection中也有一个url属性. // 这是Model中的url方法 url: function() { var base = ...

  9. C++面试题：++i和i++哪个效率高？

    1.当变量i的数据类型是c++语言默认提供的类型的话,他们的效率是一样的. 从其汇编执行的条数是一样的,所以其执行效率是一样的(有兴趣可以用gdb查看汇编代码)  2.我们自定的数据类型,++i效率高 ...

  10. Qt5遇到的问题

    好久没用Qt了,今天又重新安装了一个,结果遇到不少问题 本机环境:VS2015,Qt5.7 装好后,就新建工程测试了一下,结果无法编译,提示 :-1: error: cannot open C:\Us ...