当サイトでは、「賢威7で「Max Mega Menu」プラグインを設置する方法」でご紹介したように、賢威7のデフォルトのグローバルメニューではなく、Max Mega Menuで生成されたグローバルメニューを表示させています。

今回は、このMax Mega Menuで生成されたグローバルメニューをスマホの画面上部に固定させる方法をご紹介します。

※追記
CSSのみでグローバルメニューを固定する方法を追加しました。この記事でご紹介している内容だと、スクロール時に一瞬だけグローバルメニューが消えてまた表示されるというのが気になったので、CSSのみでの固定をおすすめします

説明が分かりやすいサイトをご紹介

以下のサイトを参考にしました。とても分かりやすいです。

参考Max Mega Menuの使い方と応用とSticky Menuの設定

javascriptの追加

当サイトは賢威の子テーマで運用しているので、子テーマディレクトリに「js」ディレクトリを追加し、「sticky_menu.js」というファイル名で以下のソースを記述しています。

//スマホのグローバルメニューを上部に固定
jQuery(function() {
    var nav = jQuery('.global-nav');

    // メニューのtop座標を取得する
    var offsetTop = nav.offset().top;

    var floatMenu = function() {
        // スクロール位置がメニューのtop座標を超えたら固定にする
        if (jQuery(window).scrollTop() > offsetTop) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }
    }
    jQuery(window).scroll(floatMenu);
    jQuery('body').bind('touchmove', floatMenu);
});

「sticky_menu.js」を読み込ませる

上記で作成した「sticky_menu.js」を子テーマディレクトリにある「header.php」で読み込ませます。

<script type="text/javascript" src="/wp-content/themes/fans-web-child/js/sticky_menu.js" charset="utf-8"></script>
</head>

タグの直前に「sticky_menu.js」を読み込ませる記述を追加しました。

子テーマディレクトリ名などのパスは、ご自分の環境に合わせて適宜変更してください。

CSS(スタイルシート)の修正

CSSファイルも子テーマフォルダにある「rwd.css」に以下を追記しています。

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

/* グローバルメニューを画面上部で固定 */
.fixed {
    position: fixed;
    top: 0;
    z-index: 1;
}

}

これで、賢威7に設置したMax Mega Menuが生成したグローバルメニューをスマホの画面上部に固定されます。