@media (max-width: 767px)

.main-sidebar, .left-side {

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

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

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

  transform: translate(-230px, 0);

}
@media (max-width: 767px)

.sidebar-open .main-sidebar, .sidebar-open .left-side {

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

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

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

  transform: translate(0, 0);

}

　　

webapp 侧边导航效果的更多相关文章

  1. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  2. Android 新兴的UI模式——侧边导航栏【转】

    侧边导航栏也就是大家熟知的SliddingMenu,英文也叫Fly-In App Menu.Side Navigation等.当然谷歌现在已经推出类似这个效果的组件--Navigation Drawe ...

  3. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  4. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  5. 【机器学习实践】Jupyter Notebook安装 侧边导航栏功能 操作及其他常用扩展功能介绍

    安装过程:  1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...

  6. html+css写出响应式侧边导航栏

    html部分:先写用div画好六个导航的卡片,再利用css添加响应效果 <div class='card-holder'> <div class='card-wrapper'> ...

  7. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  8. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  9. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

随机推荐

  1. Strust2 初体验

    Struts2的第一个案例 首先我们需要引入架包 entity: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 package ...

  2. 【java基础】内存分析

    在上次我们说的<重载与重写>呢,我们遗留了一个问题,就是运行结果的各异性,那今天,我们就来探究一下         内存里的天地.                  首先呢,我们把mian ...

  3. felx项目属性(二)

    order flex-grow flex-shrink flex-basis flex align-self 1.1 order css order属性规定了弹性容器中的可伸缩项目在布局时的顺序.元素 ...

  4. ado.net增删改查操作

    ado.net是数据库访问技术将数据库中的数据,提取到内存中,展示给用户看还可以将内存中的数据写入数据库中去 并不是唯一的数据库访问技术,但是它是最底层最基础的数据库访问技术 使用ado.net对数据 ...

  5. 【转】HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

  6. LoadRunner11录制APP脚本（2）

    通过安卓模拟器实现LoadRunner11录制APP脚本 http://www.51testing.com/html/24/15110424-3686857.html http://www.51tes ...

  7. loadrunner获取本机的机器名称

  8. Liferay 6.2 改造系列之十六：关闭OpenID模式的单点登录

    在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # Set this to true to enable OpenId au ...

  9. http://blog.csdn.net/hitmediaman/article/details/6636402

    http://blog.csdn.net/hitmediaman/article/details/6636402

  10. git 学习笔记4--.gitignore

    很多时候,我们都不希望非源码的文件加入到repository管理. 这时,.gitignore文件就上场了. ignore规则 所有空行或者以注释符号 # 开头的行都会被 Git 忽略. 可以使用标准 ...