效果

出现

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. root用户改动普通用户文件

    首先使用别的用户登录入LINUX系统,切换成root用户.进入到须要改动的用户主文件夹,对该用户文件夹下的文件进行改动

  2. ViewPager 详解（一）---基本入门

    前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块.要研究就彻底的研究研究,我从不满足于一个功能只是简单的应用,要学就学的彻底,所以我打算将Vi ...

  3. TinyXml 快速入门（三）

    在<TinyXml 快速入门(二)>介绍使用tinyxml库获取xml文件声明,查询指定节点.删除指定节点的做法.在本文中继续介绍修改指定节点和增加节点的做法. 修改节点其实和查询指定节点 ...

  4. 关键字explicit

    今天在<C++ Standard Library>中看到 explicit 的作用,在这里做一下笔记,以备下次再次忘记该关键字的作用. By using the keyword expli ...

  5. solr error logs org.apache.solr.common.SolrException: ERROR: [doc=17] unknown field alias

    在solr中 添加新的索引词语时,报如标题所示错误,指定是插入的字段没有在solr索引字段里 可以修改 solr安装目录/solr/conf 目录下的 schema.xml 在此xml文件内加入所需字 ...

  6. Java利用Rxtx进行串口通讯

    最近在做传感器数据采集的工作,底层是基于Zigbee的无线传感网络,所有数据采集到Zigbee协调器上然后通知上位机数据采集完成,上位机通过USB转串口去读取数据就可以了.那么问题来了,如何进行串口通 ...

  7. centos5.5上apache快速安装H264流媒体支持MP4-H264边下边播

    2013年的某一天,客户反馈北京同事做的广告视频下载速度好慢,几MB的视频在手机上要下载接近一分钟才能开始播放. 我分析后发现两点:1)托管的服务器没支持流媒体:2)广告视频MP4并非流媒体格式. 对 ...

  8. spring06Aop

    1.实现前置增强 必须实现接口MethodBeforeAdvice接口 创建对应的文件 public interface Animal {//主业务接口 void eat(); //目标方法 void ...

  9. AngularJs学习html转义

    MainApp.directive('ngHtml', function () { function watch(scope, el, watchExp){ scope.$watch(watchExp ...

  10. vsftp关于"550 create directory operation failed"问题解决

    前提: 昨天晚上配置好了vsftp, 但登陆后,除了浏览,什么也干不了.(如新建文件/文件夹, 删除文件, 重命名等都不可操作) 都是弹出 "550 create directory ope ...