WordPress
【WordPress】指定したサイズからSlickNavに切り替えることができるSlickNav Mobile Menu
February 27, 2017
SlickNav Mobile Menuは指定したブラウザサイズからSlickNavに切り替えることができるプラグイン。ブラウザサイズ指定、ロゴ追加、ラベル変更、ヘッダー固定、リンク色変更、メニュー背景色変更も設定することが可能。
SlickNav Mobile Menuプラグインを導入
ダッシュボード >> プラグイン >> 新規追加 >>
有効化にすると設定に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>
SlickNav Menu
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をクリック。
