【jQuery】オフキャンバスナビゲーションメニューIcy Off-Canvas

Icy Off-Canvasは簡単なオフキャンバスナビゲーションメニューです。デモページにはLeft,Rightの2つが準備されていて、リンクやサイトオーバーレイがクリックされたときには閉じます。スマホサイトなどでも使えるかと思います。

SCSS

@import 'icy-off-canvas-base';
@import 'icy-off-canvas-styles';

CSS

SCSSかCSSどちらかを使用

<link rel="stylesheet" href="css/icy-off-canvas.css">

JS

jQuery本体は1.9+を使用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/icy-off-canvas.min.js"></script>

HTMLマークアップ

ナビ部分

<div class="ioc" id="menu-1">
<ul class="ioc-list">
<li class="ioc-list-header">Header</li>
<li><a href="#">Item 1</a></li>
<li><a href="#" class="active">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

リンク、ボタン

<a href="#" data-ioc-show="menu-1" data-ioc-side="left">Menu</a>

data-ioc-show 表示するオフキャンバス定義

 
Icy Off-Canvas Menu

【jQuery】オフキャンバスナビゲーションメニューIcy Off-Canvas

  • LATEST
  • RELATED
  • POPULAR