canvi.js

编程之家收集整理的这个编程导航主要介绍了canvi.js编程之家,现在分享给大家,也给大家做个参考。

canvi.js

canvi.js 介绍

canvi.js是一款js侧边栏菜单插件。canvi.js使用简单,可以快速的制作出侧边栏展开收缩js特效。你可以在同一个页面实例化多个侧边栏实例,还可以设置侧边栏的响应式宽度,自定义侧边栏样式等。  

canvi.js使用

1、引入

< link rel="stylesheet" href="canvi.css" type="text/css" >

< script type="text/JavaScript" src="canvi.js" >< /script>

2、html

<!DOCTYPE html>

<html lang="zh">

<head></head>

<body>

<!--侧边栏-->

<div class="canvi-navbar"></div>

<!--页面内容-->

<div class="canvi-content"></div>

</body>

</html>

3、初始化

var canvi = new Canvi();

如果在同一个页面实例化多个侧边栏,可以像下面这样初始化插件:

var canviLeft = new Canvi({

content: '.js-canvi-content',

navbar: '.js-canvi-navbar--left',

openButton: '.js-canvi-open-button--left'

});

var canviRight = new Canvi({

content: '.js-canvi-content',

navbar: '.js-canvi-navbar--right',

openButton: '.js-canvi-open-button--right'

});

网站地址:https://pineco.de/project/canvi-off-canvas-navigation/

GitHub:https://github.com/thepinecode/canvi

网站描述:一款js侧边栏菜单插件

canvi.js官方网站

官方网站:https://pineco.de/project/canvi-off-canvas-navigation/

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

相关文章

scalable.js,一款可以使任何HTML元素动态缩放适合父元素的js...
Pica,使用JS进行快速高品质图像缩放
react-dates,React 日期组件
date-fns,轻量级的JavaScript 日期工具库
WOW.js,一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件
Pikaday,一个 轻量级、无依耐Js日期选择器