WordPress
【WordPress】メニューを固定配置する軽量のスティッキーメニュープラグインmyStickymenu
March 21, 2017

myStickymenuは軽量で指定したピクセル数スクロールすると、ページの一番上のヘッダー部分にメニューを固定表示することができるスティッキーメニュープラグイン。テーマによっては動作しない可能性もあります。
ダッシュボード >> プラグイン >> 新規追加 >>
有効化にすると設定にmyStickymenuが追加されます。
上記のようなメニューを作成したとします。スタイルなどは以下のような形です。
<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>
Sticky Class | メニューやヘッダーのdivクラスまたはID。上記のメニューを参考にすると.main-header-nav |
---|---|
Sticky z-index | スティッキーZインデックス |
Sticky Background Color | スティッキー背景色 |
Sticky Opacity | スティッキー不透明度 |
Sticky Transition Time | スティッキー遷移時間 |
Disable at Small Screen Sizes | スクリーンサイズが小さい場合は無効 |
Make visible on Scroll | 何pxスクロールして表示するか |
Make visible on Scroll at homepage | ホームページで何pxスクロールして表示するか |
Fade or slide effect | チェックを入れるとスライド、入れないとフェード |
.myfixed css class | .myfixedのCSSクラス |
Disable CSS style | CSSスタイルを無効 |
保存します。
ヘッダー部分にメニューが表示されます。
スクロールしてヘッダー部分にメニュー表示。