当前位置:主页 > 网页特效 > 菜单导航 >

基于Bootstrap的jQuery隐藏滑动侧边栏特效插件

发布时间:2018/07/04 来源:互联网 浏览: 关键词:jquery bootstrap 菜单导航 侧边栏 
基于Bootstrap的jQuery隐藏滑动侧边栏特效插件 基于Bootstrap的jQuery隐藏滑动侧边栏特效插件
阿里云

简要教程

Bootstrap Offcanvas是一款非常简单的jQuery隐藏滑动侧边栏插件。该jQuery插件使用Bootstrap的样式和标签来创建隐藏的滑动侧边栏,样式虽然有些单调,但可以通过修改CSS样式来使其更加美观。而且它的工作性能是一流的。下图演示了该隐藏滑动按钮的工作过程。

Bootstrap隐藏滑动侧边栏特效

安装

可以通过Bower来安装该插件:

bower install bootstrap-offcanvas   

使用方法

要使用该Bootstrap隐藏侧边栏插件,首先要在页面中引入bootstrap.offcanvas.css和jquery、bootstrap.offcanvas.js文件。

<linkrel="stylesheet"href="css/bootstrap.offcanvas.min.css"/>
<scriptsrc="js/jquery.min.js"></script>
<scriptsrc="js/bootstrap.offcanvas.js"></script>      

HTML结构

HTML结构上你需要一个按钮或其它元素来触发侧边栏菜单。可以是任何的HTML元素。

<buttontype="button"class="navbar-toggle offcanvas-toggle"data-toggle="offcanvas"data-target="#js-bootstrap-offcanvas">
    <spanclass="sr-only">Toggle navigation</span>
    <spanclass="icon-bar"></span>
    <spanclass="icon-bar"></span>
    <spanclass="icon-bar"></span>
</button>     

侧边栏菜单的代码如下,你需要注意两个地方:

  • navbar-offcanvas class
  • 在按钮的data-target指定的选择器要指向侧边栏菜单。例如像上边一样使用ID选择器。注意:该选择器可以使用任何元素的class或属性来充当。

<navclass="navbar navbar-default navbar-offcanvas"role="navigation"id="js-bootstrap-offcanvas">
    ...
</nav>   

你可以通过设置下面的class来改变滑动侧边栏的位置:

navbar-offcanvas-right      

该插件支持下拉菜单,使用的是标准的Bootstrap代码。唯一区别是它不需要data-toggle属性。

<liclass="dropdown">
    <ahref="#"class="dropdown-toggle">Dropdown <spanclass="caret"></span></a>
    <ulclass="dropdown-menu"role="menu">
        <li><ahref="#">Action</a></li>
        <li><ahref="#">Another action</a></li>
        <li><ahref="#">Something else here</a></li>
        <liclass="divider"></li>
        <li><ahref="#">Separated link</a></li>
        <liclass="divider"></li>
        <li><ahref="#">One more separated link</a></li>
    </ul>
</li>    

你也可以在页面中添加另外的按钮来触发隐藏滑动菜单的滑入和滑出。

注意,该插件不知道你会使用哪个按钮来作为触发事件的主按钮,它会使用第一个找到的按钮来作为主按钮。

<buttontype="button"class="navbar-toggle offcanvas-toggle pull-right"data-toggle="offcanvas"data-target="#js-bootstrap-offcanvas"style="float:left;">
    <spanclass="sr-only">Toggle navigation</span>
    <iclass="glyphicon glyphicon-remove"></i>
</button>     

下面是一个使用图标的内置版本的主菜单按钮代码:

<buttontype="button"class="navbar-toggle offcanvas-toggle offcanvas-toggle-close"data-toggle="offcanvas"data-target="#js-bootstrap-offcanvas">
    <spanclass="icon-bar"></span>
    <spanclass="icon-bar"></span>
    <spanclass="icon-bar"></span>
    <spanclass="sr-only">Toggle navigation</span>
</button>     

Transitions

通过使用下面的class,可以制作淡入淡出的滑动效果。注意:这个class也可以在触摸屏事件上工作。

navbar-offcanvas-fade    

触摸屏事件

通过添加下面的class,可以增加触摸屏的触摸事件,从而可以通过触摸菜单按钮来展开或隐藏侧边栏。

navbar-offcanvas-touch

注意:虽然可以在触摸屏上使用多个侧边栏菜单,但必须保证它们不同时在一个侧边上。如果两个侧边栏同时在一个侧边上,该滑动侧边栏插件将不能正常工作。

事件

有4个事件可以出发侧边栏的滑入和滑出。它们的语法和Bootstrap官方的js语法相同。

事件类型 描述
show.bs.offcanvas 隐藏滑动菜单显示前触发
shown.bs.offcanvas 隐藏滑动菜单显示后触发
hide.bs.offcanvas 隐藏滑动菜单隐藏前触发
hidden.bs.offcanvas 隐藏滑动菜单隐藏后触发

定制

你可以通过SASS文件来定制该滑动侧边栏的样式。

你可以在下载包中找到SASS文件,这个SASS文件只使用了少量的变量,如:

$offcanvas-width:250px!default; // The width of the offcanvas menu
$offcanvas-animation-time:0.15s !default; // Transition time to pull/hidemenu
$offcanvas-toggle-background:#f8f8f8!default; // Background colour for toggle
$offcanvas-toggle-bars-color:#000!default; // Colour foriconbars in toggle      

插件中只有一个media query,它使用Bootstrap的$screen-sm变量,如果它不存在,宽度的breakpoint被设置为768px。

共有人阅读,期待你的评论!评论
Top