スマホ用のレスポンシブ対応として、
グローバルメニューやサイドメニューをどう表示するかは悩みどころです。
上からトグルメニューで降りるもの、
横からスライドインするものなど様々ありますが、
ここでは「sp-slidemenu.js」というjavascriptのプラグインを使って、
横からスライドインするメニューを作る手順を紹介します。
目次
公式のGitHubページから、
「sp-slidemenu.js」のファイル一式をダウンロードします。
外部ページ公式GitHubページ
FTPでファイルをサーバー上に配置する
解凍したフォルダの中から、
「sp-slidemenu-min.js」というファイルを見つけ、
FTP転送でサーバー上にアップロードします。
この時、jsファイルとhtml,phpファイルが混ざらないように、
「js」という名前のディレクトリを作って、その中に格納しておくと良いでしょう。
次に、解答したフォルダの「sample」→「css」フォルダの中に、
「styles.css」というファイルがありますので、
このファイルの名前を適当に変更（sp-slidemenu-styles.css等）して、
FTP転送でサーバー上にアップロードします。
この時、jsファイルの時と同様に、
「css」というディレクトリを作ってその中に配置すると良いでしょう。
styles.cssのスタイルシートを使うと、
png画像の読み込みがありますので、
解答したフォルダの「img」フォルダに入っている「menu_button_back.png」というファイルをFTP転送でサーバーにアップロードします。
この時、jsファイルの時と同様に、
「img」というディレクトリを作ってその中に配置すると良いでしょう。
サイト上でアップロードファイルを読み込む記述を書く
実際にサイト上でスクリプトを動かすためには、
「sp-slidemenu-min.js」と「styles.css」の２つのファイルを読み込む記述が必要となります。
<head>〜</head>の中に以下の記述を行います。
ファイル場所は各自のディレクトリ構造に合わせて設定してください。
HTML
ちなみにWordPressの場合は、
自動でテンプレートの相対パスを取得してくれる、
「get_template_directory_uri」という便利な関数があるので、
以下のように記述することで、ファイルの読み込みが行えます。
HTML
子テーマを使っている時は、
子テーマの相対パスを取得してくれる、
「get_stylesheet_directory_uri」という便利な関数を使いましょう。
以下のように記述することで、ファイルの読み込みが行えます。
HTML
サイト内にメニューを記述する
サイト内にメニューを記述します。
HTML
サイト内にjavascriptを記述する
スライドインのアクションを発生させるためには、
サイト内にメニューを記述する必要があります。
javascript
動作確認
以上の工程で、スライドインメニューの実装が完了しました。
あとは動作確認とデザインの調整を行いましょう。
