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: 810;-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>

转载于:https://www.cnblogs.com/jiqing9006/p/5091546.html

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

html图片自动滚动播放器,jQuery+css实现图片滚动效果(附源码)
bxCarousel参数说明: move:每次滚动移动图片的数量,默认为4. display_num:展示图片的数量,默认为4. speed:图片滚动速度,默认为500毫秒. margin:图片间的间 ...
CSS 实现菜单吸附效果
很多时候我们在做移动端的时候会有菜单吸附的需求,通常我们都是使用 css + js 来实现的,现在我们用纯 css 来实现一下. CSS Scroll Snap (css滚动捕捉) 允许你在用户滚动后 ...
html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果 ...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
jQuery实战3:菜单效果
菜单是web开发中常见的功能模块,它能够直观的展示给用户本站中有哪些功能.一般在页面中看到的菜单类型分为两种:横向菜单和纵向菜单. 今天分别来完成纵向菜单和横向菜单的功能.先来看看纵向菜单,首先导航栏 ...
300+Jquery, CSS, MooTools 和 JS的导航菜单资源
如果你是网站前端开发人员,那么对你来说,也许做一个漂亮导航菜单会很得心应手.本文要为大家总结各种导航菜单的资源,以便让大家的网站前端开发的工作更方便更快速,只要选择现成的例子就可以应用于自己的网站了. ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单一.Jquery折叠菜单效果二.jquery侧边栏菜单效果三.CSS侧边栏菜单效果先上代码 <!DOCTYPE html&g ...
使用jQuery创建折叠式菜单（手风琴效果）
使用jQuery创建折叠式菜单(手风琴效果) 今天给大家介绍如何使用jQuery创建折叠式菜单,即通常所说的手风琴效果(accordion [əˈkɔ:rdiən]). 实现效果如下: 一.HTML代 ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...

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

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

最新文章

热门文章