多階層ドロップダウン対応レスポンシブメニュープラグイン「WP Responsive Menu」セットアップ

目的

レスポンシブ対応されていないサイトをレスポンシブ化する時に、プラグイン「WP responsive Menu」（投稿者: MagniGenie）が便利です。
このプラグインはメニューが多階層でドロップダウンする動作にも対応しています。
ここではそのセットアップについて述べます。

スマホメニュー動作仕様

メニューはWordPressの標準機能「外観」→「メニュー」で定義したものが適用される（ここでは仮に「main-menu」とする）。
ハンバーガーだけを右上に常時固定表示する（新たなスマホ用ヘッダーは作成しない）。
メニュー項目はハンバーガータップで右からスライドインする。
子メニューは通常時は非表示とし、アイコン（▼）タップでドロップダウンする。

設定

設定はプラグインの設定と、デザインカスタマイズのための独自cssの設定があります。

■ プラグインの設定（サイドメニュー「WPP Menu」）

[ ]内が設定値

General
1. Enable Responsive Menu ： [チェック]　←このプラグインの動作発動設定
2. Select Menu ： [main-menu]
3. Elements To Hide On Mobile ： [（レシポンシブで非表示とするメニューを指定）]
Appearance
1. Menu Style ： [Custom]　←これでハンバーガーだけ右上固定にできる
2. Menu Icon Position From Top ： [1]　←上をCustomにすると1以上にしないと位置不定
3. Menu Icon Direction ： [Right]
4. Menu Open Direction ： [Right]
5. Display Menu From Width ： [750]　←レシポンシブが有効になるデバイス幅（px）

■ 独自cssの設定

	/* ハンバーガーのデザイン変更（背景なし・通常時は「三」が黒・オープン時は「X」が白） */
	    /* 背景透過 */
	.wprmenu_bar #custom_menu_icon.hamburger{
		background-color:	transparent;
	}
	    /* 通常時の「三」は黒 */
	.wprmenu_bar .hamburger-inner,
	.wprmenu_bar .hamburger-inner::before,
	.wprmenu_bar .hamburger-inner::after {
		background: #333;
	}
	.wprmenu_bar .hamburger:hover .hamburger-inner,
	.wprmenu_bar .hamburger:hover .hamburger-inner::before,
	.wprmenu_bar .hamburger:hover .hamburger-inner::after {
		background: #333;
	}
	    /* オープン時の「X」は白 */
	.wprmenu_bar.active .hamburger-inner,
	.wprmenu_bar.active .hamburger-inner::before,
	.wprmenu_bar.active .hamburger-inner::after {
		background: #fff;
	}
	.wprmenu_bar.active .hamburger:hover .hamburger-inner,
	.wprmenu_bar.active .hamburger:hover .hamburger-inner::before,
	.wprmenu_bar.active .hamburger:hover .hamburger-inner::after {
		background: #fff;
	}

    /* ハンバーガー（この時は「X」になっている）の表示領域確保のためメニュー領域を下げる */
	.custom #wprmenu_menu_ul{
		padding-top:	50px;
	}

	/* ドロップダウンメニューアイコンを「▼」に変更 */
	.icon_default.wprmenu_icon_par::before {
		content: "▼";
		position: absolute;
		font-size:	20px;

		/* ▼回転アニメーション */
	    -webkit-transition: all 0.5s ease;
	    -moz-transition: all 0.5s ease;
	    -o-transition: all 0.5s ease;
		transition:all 0.5s ease;
	}
    /* 「▼」を回転させて「▲」に */
	.icon_default.wprmenu_par_opened::before {
		transform:rotate(60deg);
	}
    /* 「▼」の位置調整 */
	div#mg-wprm-wrap ul#wprmenu_menu_ul > li > span.wprmenu_icon::before {
		right: 13px;
	}