【Javascript】シンプルなvanilla JavaScriptオフキャンバスナビゲーションCanvi

Javascript

October 29, 2017

TAGS:
Javascript
Navigation
Responsive

Canviシンプルなvanilla JavaScriptオフキャンバスナビゲーション。

Introduction, installation

// To the head
<link rel="stylesheet" href="canvi.css">
// To the end of the body
<script src="canvi.js"></script>

Basic Usage

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div class="canvi-navbar"></div>
    <div class="canvi-content"></div>
</body>
</html>

var canvi = new Canvi();

Multiple Instance

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'
});

MIT

Demo/Download