March 21, 2017

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>

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

保存します。

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

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