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实现菜单收缩效果并适应多种浏览器与移动平台的更多相关文章
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery css 主菜单样式的跳转
想要实现的效果事实上是挺常见的那种:网页的主菜单一開始有一种默认的样式(如A样式),当鼠标经过某一菜单项时.此菜单项会套用一种样式(如B样式),当鼠标点击某一菜单项时.当前菜单项会套用B样式,其余菜单 ...
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 推荐20款基于 jQuery & CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- js+css实现带缓冲效果右键弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery 仿windows10菜单效果下载
http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载
随机推荐
- ECLIPSE/MYECLIPSE OPERATES
Eclipse相关操作 1.删除所有注释 1.eclipse删除所有注释 Ctrl+F: /\*{1,2}[\s\S]*?\*/ 选择正则表达式,替换全部即可.
- android recovery 主系统代码分析
阅读完上一篇文章: http://blog.csdn.net/andyhuabing/article/details/9226569 我们已经清楚了如何进入正常模式和Recovery模式已有深刻理解了 ...
- [置顶] Hash查找,散列查找
//Hash.h #ifndef HASH_H #define HASH_H #define HASH_ARR_SIZE 100 #define FILL -1 #include <stdlib ...
- [Javascript] Advanced Function Scope
Something like 'for' or 'while', 'if', they don't create a new scope: ,,]; ; i < ary.length; i++) ...
- Arduino 数码管LED屏驱动
今天測试数码管LED屏驱动,用某产品的一个共阴极的LED屏,依据电路图做数码管LED屏的检測. 代码写得有些冗长,有好几种驱动的方法,这里仅仅是当中一种最直接的方案,抽出时间要做个更有效率的调用和驱动 ...
- MySQL（11）：存储引擎
1.存储引擎是什么? MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择 ...
- Win10系统修改MAC地址
本地管理地址,输入想修改的MAC地址后,点确定即完成修改.在CMD窗口中,使用ipconfig 命令可以查看新的MAC地址. 再次钩选不存在,则还原为原来的MAC地址.
- 封装函数--->切换,添加,删除class
var obj={}; obj.className='a b c d active'; //切换class function toggle(obj,className) { var str=obj.c ...
- Remoting 的“传递的引用”理解
WCf是集大成者,具有其他微软的很多技术,其中分布式上很多借助于Remoting,所以研究一下Remoting有助于理解WCF 提到Remoting就不得不涉及到MarshalByRefObject这 ...
- url的非法字符有哪些
需要过滤的特殊字符及字符串有: net user xp_cmdshell /add exec master.dbo.xp_cmdshell net localgroup administrators ...