横から出てくるサイドメニュー
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>
ボタンの追加とカスタマイズ
フリックだけでなく、開閉ボタンを付けたいという場合には記述を追加してください。
関連記事
-
-
クリックで表示・非表示が切り替わるメニューバー
jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …
-
-
スクロールしても画面上部に固定されるメニュー
jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …
-
-
もっと読み込む機能の実装の備忘録
もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …
-
-
上下スクロールに対応したパララックス効果
「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …
-
-
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する
mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …
- PREV
- クリックで表示・非表示が切り替わるメニューバー
- NEXT
- もっと読み込む機能の実装の備忘録