以下のページでは、
左右からスライドインするメニューの実装方法を紹介してきました。
ここでは、これをさらにカスタマイズして、
上キャプチャのようなデザインのカスタムスライドインメニューを作る方法を紹介します。
スライドインメニューのプログラムを読み込む
以下のページの
- 「sp-slidemenu.js」のファイルを入手する
- FTPでファイルをサーバー上に配置する
- サイト上でアップロードファイルを読み込む記述を書く
を参考に、
jQueryファイルの読み込みとjsプログラムの記述を行います。
参考ページsp-slidemenu.jsを使って画面の左右からスライドインするメニューを作る方法
スライドインメニューをhtmlで記述する
htmlで以下のように記述します。
HTML
jQueryを記述する
スライドメニューを利用するため、以下のようなjQueryを記述していきます。
jQuery
CSSを記述する
デザインを整えるため、以下のようなphpを記述します。
CSS
