效果

出现

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. SCGHR 系统设计

    1.表,弄清表的意义,表是系统的核心.

  2. qt之treeview例子

    # -*- coding: utf-8 -*- # python:2.x __author__ = 'Administrator' from PyQt4.Qt import * from PyQt4. ...

  3. (转)Maven实战（七）settings.xml相关配置

    一.简介 settings.xml对于maven来说相当于全局性的配置,用于所有的项目,当Maven运行过程中的各种配置,例如pom.xml,不想绑定到一个固定的project或者要分配给用户时,我们 ...

  4. ZeroMQ(JAVA)中的数据流,SessionBase与SocketBase

    前面的文章中已经比较的清楚了ZeroMQ(java)中如何在底层处理IO, 通过StreamEngine对象来维护SelectableChannel对象以及IO的事件回调,然后通过Poller对象来维 ...

  5. I have a dream

    1.金斧子 2.有利网 3.金融街

  6. 百度2014校园招聘算法——给出一组数据A=[a_0, a_1, a-2, ... a_n](当中n可变)，打印出该数值元素的全部组合。

    VC++ void StringTest(CString source, CStringArray& dest) { if(source.IsEmpty()) { } else { CStri ...

  7. android实现界面左右滑动（GridView动态设置item,支持每个item按某个属性排序来显示在不同的界面）

    效果图 :                         分别是第一页.第二页.第三页,随手截的图,不整齐,勿见怪.开始走了弯路,废了不少时间. 思路如下: 1.用ViewPager实现左右分页滑动 ...

  8. Tomcat jdbc pool配置

    Tomcat jdbc pool是apache在tomcat7版本中启用的新连接池,用它来解决以往DBCP无法解决的一些问题. Tomcat jdbc pool的优点: (1)    tomcat j ...

  9. mac下的home键、end键以及insert键的替代

    最近用android模拟器模拟东西,发现模拟器的home快捷键是键盘上的home键,这让我在windows下很好找,换到mac下找了老半天也没找到,后来才查到是有替代键的,放到这里做备份 home键f ...

  10. MySQL-视频跟随练习笔记

    在表中添加某列 alter table tbl_user add email varchar(50); 在表中删除某列 alter table tbl_user drop email; 重命名某列 a ...