以下のページでは、
左右からスライドインするメニューの実装方法を紹介してきました。

 

 

ここでは、これをさらにカスタマイズして、

上キャプチャのようなデザインのカスタムスライドインメニューを作る方法を紹介します。

 

スライドインメニューのプログラムを読み込む

以下のページの

 

  • 「sp-slidemenu.js」のファイルを入手する
  • FTPでファイルをサーバー上に配置する
  • サイト上でアップロードファイルを読み込む記述を書く

 

を参考に、

jQueryファイルの読み込みとjsプログラムの記述を行います。

 

参考ページsp-slidemenu.jsを使って画面の左右からスライドインするメニューを作る方法

 

スライドインメニューをhtmlで記述する

htmlで以下のように記述します。

 

HTML

 

jQueryを記述する

スライドメニューを利用するため、以下のようなjQueryを記述していきます。

 

jQuery

 

CSSを記述する

デザインを整えるため、以下のようなphpを記述します。

 

CSS

 

 

おすすめの記事