WordPress

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

March 21, 2017
myStickymenu


myStickymenuは軽量で指定したピクセル数スクロールすると、ページの一番上のヘッダー部分にメニューを固定表示することができるスティッキーメニュープラグイン。テーマによっては動作しない可能性もあります。

myStickymenuプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> 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>

myStickymenu Settings

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スタイルを無効

保存します。

ヘッダー部分にメニューが表示されます。


スクロールしてヘッダー部分にメニュー表示。