横から出てくるサイドメニュー

Snap.jsをダウンロードして準備

まずはページを左右にスライドしてメニュー表示するライブラリ

「Snap.js」をダウンロードします。GitHubで公開されています。

https://github.com/jakiestfu/Snap.js/

ダウンロードしたファイルを解凍して「snap.min.js」と「snap.css」を

自分のサイトのフォルダに格納します。

作成したHTMLファイルに「snap.min.js」と「snap.css」を読み込ませてください。

スライドするメニュー構造を作る

メインとメニューのコンテンツを記述します。先ほど用意した

HTMLのメインコンテンツ表示部分とメニューコンテンツ部分にに対し

<div>タグとid属性とclass属性を設定します。

<div class=”snap-drawer snap-drawer-left”>
<ul>
<li>左メニュー1</li>
<li>左メニュー2</li>
<li>左メニュー3</li>
<li>左メニュー4</li>
<li>左メニュー5</li>
</ul>
</div>

<div class=”snap-drawer snap-drawer-right”>
<ul>
<li>右メニュー1</li>
<li>右メニュー2</li>
<li>右メニュー3</li>
<li>右メニュー4</li>
<li>右メニュー5</li>
</ul>
</div>

<div id=”content” class=”snap-content”>
<h1>メインコンテンツ</h1>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br></p>

</div>

ボタンの追加とカスタマイズ

フリックだけでなく、開閉ボタンを付けたいという場合には記述を追加してください。