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

时间：2022-11-06 11:55:55

效果

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

出现

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-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&plus;CSS 简单代码实现遮罩层&lpar; 兼容主流浏览器 &rpar;

    /* ** 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&plus;css多级树形展开效果导航菜单

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

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

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

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

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

  8. js&plus;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. ROS学习（二）—— 配置ROS环境

    一.管理环境 p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 如果你在查找和使用ROS软件包方面遇到了问题,请确保你已经正确配置了脚 ...

  2. Mac Pro 资源管理器 Double Commander&OpenCurlyDoubleQuote;个性化设置” 备份

    操作系统自带的资源管理器,总是有些别扭的地方,在 Windows 系统下,我一般用 Total Commander(破解版)来作为替代品.现在换为 Mac 系统,自带的 Finer 也不怎么好用,连最 ...

  3. C&plus;&plus; 资源大全

    http://www.uml.org.cn/c++/201411145.asp http://ezlippi.com/blog/2014/12/c-open-project.html <C++ ...

  4. NHibernate初探&lpar;1&rpar;

    1 NHibernate是ORM的一种. 是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术.ORM是通过使用描述对象和数据库之间映射的元数据,将程序中的对象自动持久化到关系数据库中.本质上 ...

  5. php Smarty date&lowbar;format &lbrack;格式化时间日期&rsqb;

    Example 5-8. date_format[日期格式] index.php: 复制代码代码如下: $smarty = new Smarty; $smarty->assign('yester ...

  6. UVAlive 3708 Graveyard&lpar;最优化问题&rpar;

    题目描述: 在周长10000的圆上,初始等距的放置着n个雕塑,现在新加入m个雕塑,要使得这n+m个雕塑仍然等距,问原来n个雕塑要移动的距离总和的最小值. 原题地址: http://acm.hust.e ...

  7. 使用ArcMap做一个1&colon;5000标准分幅图并编号

    实现这个project,十进制度.渔网工具.Excel if/Text函数.挂接Excel表.空间连接.投影这些知识是必须的.看懂本篇博文也就意味着大概掌握了以上知识. 坐标数据设置与编号标准依据&l ...

  8. 【转】asp&period;net项目在IE11下出现&OpenCurlyDoubleQuote;&lowbar;&lowbar;doPostBack”未定义的解决办法

    最近我们运营的网站有用户反馈在 IE 11 下<asp:LinkButton> 点击出现 "__doPostBack"未定义",经过一番google,终于知道 ...

  9. 2016ICPC-大连 A Simple Math Problem （数学）

    Given two positive integers a and b,find suitable X and Y to meet the conditions: X+Y=a Least Common ...

  10. 加快Android Studio的编译速度

    从Eclipse切换到Android Studio后,感觉Android Studio的build速度比Eclipse慢很多,以下几个方法可以提高Android Studio的编译速度 使用Gradl ...

相关文章