WordPress
【WordPress】指定したサイズからSlickNavに切り替えることができるSlickNav Mobile Menu
February 27, 2017

SlickNav Mobile Menuは指定したブラウザサイズからSlickNavに切り替えることができるプラグイン。ブラウザサイズ指定、ロゴ追加、ラベル変更、ヘッダー固定、リンク色変更、メニュー背景色変更も設定することが可能。
ダッシュボード >> プラグイン >> 新規追加 >>
有効化にすると設定にSlickNav Menuが追加されます。
事前にメニューを作成しておきます。今回サンプルに上記のようなメニューを作成したとします。
<nav class="center main-header-nav"> <style>.main-header-nav ul li { display: inline-block; margin-right: 5px; } </style> <?php wp_nav_menu( array( 'theme_location'=>'main-navi', 'container' => false, 'items_wrap' =>'<ul>%3$s</ul>')); ?> </nav>
Add Menu to Replaceに.main-header-nav
を追加するだけでも使えました。
Add Menu to Replace | 交換するメニュー |
---|---|
Pixel Width to Switch to SlickNav | SlickNavに切り替えるピクセル幅 |
Fix Menu to Head | メニューをヘッダーに固定 |
Hide Main Header | メインヘッダを隠す |
Image Logo – Enter a URL or upload an image for a logo, smaller is better here, like 45px in depth and up to 200px in width, default position is left, to swap to right change Menu Button Position (above) to left | 200px x 45pxのロゴ画像のURLを入力するか、ロゴ画像をアップロード |
Logo Alt Text | ロゴ代替テキスト |
Text Logo – Enter text for Logo | テキストのロゴ |
Text Logo Color | テキストロゴの色 |
Menu Button Position | メニューボタンの位置 |
SubMenu Indicator Position | サブメニューのインジケータの位置 |
Menu Background Color | メニューの背景色 |
Menu Button Color | メニューボタンの色 |
Menu Button Color when Menu expanded | 展開したメニューボタンの色 |
Label Color | ラベルカラー |
Hamburger Icon Color | ハンバーガーアイコンの色 |
Label Shadow | ラベルの影 |
Icon Shadow | アイコン影 |
Link Color | リンク色 |
Link Hover Color | リンクホバー色 |
Link Hover Background Color | リンクホバーの背景色 |
Show search field at bottom of Menu | メニューの一番下にある検索フィールドを表示 |
Search Label Name | 検索ラベル名 |
Search Icon Color | アイコンの色を検索 |
Search Icon Background Color | 検索アイコンの背景色 |
Font Size | フォントサイズ |
Label Font Size | ラベルのフォントサイズ |
Label Weight | ラベルの太さ |
Font Case | フォントケース |
Menu Position | メニュー位置 |
Menu Label Name | メニューラベル名 |
Close Menu on Click | クリックしてメニューを閉じます |
Allow Parent Links | 親リンクを許可 |
Show Child Links on Open | サブメニューのリンク表示 |
Toggle Submenus | トグルサブメニュー |
Speed of Menu open/close (Higher numbers are slower) | オープン/クローズメニューの速度 |
Closed Symbol, default ► | クローズドシンボル |
Opened Symbol, default ▼ | オープンシンボル |
Updateをクリックします。
PC表示。
ブラウザ幅を600px(デフォルト)狭めました。
MENUをクリック。