サイト開発日記

Just another WordPress site

*

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

   

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

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
上下スクロールに対応したパララックス効果

「skrollr」の特徴 Webサイトの演出手法であるパララックス効果は背景、画 …

no image
スクロールしても画面上部に固定されるメニュー

jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …

no image
クリックで表示・非表示が切り替わるメニューバー

jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …

no image
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する

mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …

no image
もっと読み込む機能の実装の備忘録

もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …