基于Bootstrap3的响应式Offcanvas菜单界面布局
简要教程 简要教程 这是一款基于Bootstrap3.x的响应式Offcanvas菜单界面布局特效。该界面布局在大屏幕设备上，菜单显示为正常的顶部菜单。在小屏幕设备中，菜单会收缩为下拉菜单，在点击主菜单按钮后，菜单面板从屏幕左边被推出来，效果非常的炫。 这是一款基于Bootstrap3.x的响应式Offcanvas菜单界面布局特效。该界面布局在大屏幕设备上，菜单显示为正常的顶部菜单。在小屏幕设备中，菜单会收缩为下拉菜单，在点击主菜单按钮后，菜单面板从屏幕左边被推出来，效果非常的炫。 下面是该菜单的媒体查询样式。 下面是该菜单的媒体查询样式。 本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Menu-Navigation/201508072372.html
查看演示 下载插件
使用方法
使用方法
- $('document').ready(function () {
- $('.navbar-toggle').on('click', function () {
- $('.collapse, #mainContainer').toggleClass('in');
- });
- });
- $(window).resize(function () {
- if ($(window).width() > 768) {
- $('.collapse, #mainContainer').removeClass('in');
- };
- });
CSS样式
下面的菜单的默认样式，但添加了.in class的时候，可以使用CSS3的transition属性来使它产生动画。 下面的菜单的默认样式，但添加了.in class的时候，可以使用CSS3的transition属性来使它产生动画。- .navbar-collapse.collapse {
- border: none;
- display: block;
- background: #151515;
- position: absolute;
- left: -100%;
- top: 70px;
- width: 80%;
- max-height: none;
- -webkit-transition: left 0.5s ease;
- -moz-transition: left 0.5s ease;
- -o-transition: left 0.5s ease;
- transition: left 0.5s ease;
- }
- .navbar-collapse.collapse.in {
- left: 15px;
- }
- @media (min-width: 768px) {
- .navbar-collapse.collapse {
- width: auto;
- background: none;
- position: relative;
- left: auto;
- top: auto;
- padding: 0px;
- margin: 25px 0 35px 50px;
- }
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
