SWELL│グローバルメニューでブログパーツをホバー表示する方法

2023.03.112026.09.23

グローバルメニューを文字でなくアイコンや画像等でメニューを選択したいと思ったことはないでしょうか？

SWELLにはボックスメニューといった便利なブロックがあります。

というころで、グローバルメニューをブログパーツを使ってポップアップ表示をさせてみました。

本記事ではそのカスタマイズ方法を紹介します。

SWELLでグローバルメニューでブログパーツを表示する方法

SWELLと書きましたが、このやり方はWordPressのどのテーマでも通用します。

グローバルメニューの作成

管理画面のメニューからサービスという名前でグローバルメニューを作成しました。

メニューのCSS Class（オプション）から下記のクラスを追加してください。

gloal_menu_container

もしその項目がないときは右上の表示オプションから表示するようにしましょう。

次に作成したグローバルメニューのHTMLコードを確認します。

グローバルメニューの固有のID（今回は21813）をメモしておきましょう。

この番号は後で使います。

<li class="gloal_menu_container menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-21813">

ブログパーツにサブメニューの作成

今回はSWELLのブログパーツで作成します。

今回はSWELLのボックスメニューで作成しました。

最後にショートコードも控えます。

[blog_parts id="21787"]

functions.php

walker_nav_menu_start_elというフックを使って、サービスのメニューの下にHTMLを追加します。

先ほど控えたメニューの番号や、ショートコードを入力しましょう。

function add_custom_content_to_menu_item($item_output, $item, $depth, $args) {
    if ($item->ID == 21813) { //グローバルメニューの固有のID
        $shortcode_content = do_shortcode('');
        $item_output .= '<div class="gloal_menu_overlay"></div><ul class="sub-menu"><li class="menu-item menu-item-type-custom menu-item-object-custom">' . $shortcode_content . '</li></ul>';
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_custom_content_to_menu_item', 10, 4);

CSS

こちらはブログパーツに合わせて微調整してください。

/* グローバルメニュー */
.c-gnav .sub-menu .swell-block-box-menu__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}
.c-gnav .sub-menu .swell-block-box-menu .swell-block-box-menu__item {
    margin: 0;
    width: 25%;
}
.c-gnav .sub-menu a{
	padding:0!important;
	margin-bottom: 0!important;
}
.c-gnav .sub-menu a::before{
	display:none!important;
}
.c-gnav>.gloal_menu_container {
    position: unset;
}
.c-gnav>.gloal_menu_container>.sub-menu {
    -webkit-box-shadow: none;
    box-shadow: none;
    display: grid;
    grid-template-columns: 1fr 1em 1fr 1em 1fr 1em 1fr;
    left: auto;
    right: 4em;
    top: 100%;
    -webkit-transform: translateY(-1em);
    transform: translateY(-1em);
    width: calc(100% - (4em + 2em * 2));
    background-color: transparent;
}
.c-gnav>.gloal_menu_container>.sub-menu .ttl{
	padding:0;
	border: none;
}
.c-gnav>.gloal_menu_container>.sub-menu .menu-item{
	grid-column:1/8;
    padding:1.5em 2em;
    margin-right:-2em;
    margin-left:-2em;
    position:relative;
}
.c-gnav>.gloal_menu_container>.sub-menu .menu-item:hover{
	-webkit-transform:none;
    transform:none;
}
.c-gnav>.gloal_menu_container>.sub-menu .menu-item:before{
	content:"";
    position:absolute;
    width:100%;right:0;
    bottom:0;
    left:0;
    top:0;
    z-index:0;
    background-color:#fff;
    -webkit-box-shadow:6px 6px 12px rgba(0,0,0,.1);
    box-shadow:6px 6px 12px rgba(0,0,0,.1);
    border-radius:6px;
}
.c-gnav>.gloal_menu_container>.sub-menu a:hover{
	background-color:transparent;
    color: var(--color_main);
}

.c-gnav>.gloal_menu_container>.sub-menu .swell-block-box-menu__item{
	border:none;
}
.c-gnav>.gloal_menu_container>.sub-menu .swell-block-box-menu__link{
	padding:1em!important;
}
.c-gnav>.gloal_menu_container>.sub-menu .swell-block-box-menu__text {
    text-align: center;
    display: block;
}

黒板の実装

ホバー時にサブメニューの下に黒板を表示します。

まずはfunctions.phpに下記のコードを入れます。

function motoki_gloal_menu_overlay() {
    echo <<<EOM
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            jQuery(function($) {
                $(".gloal_menu_container").hover(function() {
                    $(this).find(".gloal_menu_overlay").addClass('overlay_visible');
                }, function() {
                    $(this).find(".gloal_menu_overlay").removeClass('overlay_visible');
                });
            });
        });
    </script>
EOM;
}
add_action('wp_footer', 'motoki_gloal_menu_overlay');

もしUncaught ReferenceError: jQuery is not definedのエラーが出た場合はjQueryを読み込む記述を足しましょう。

function enqueue_jquery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_jquery');

CSSも追加します。

.gloal_menu_overlay {
    z-index: 2;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh; 
    background-color: rgba(0,0,0,.3);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .1s ease;
    transition: all .1s ease
}

.overlay_visible {
    visibility: visible;
    opacity: 1
}
@media screen and (max-width: 960px) {
	.p-spMenu__nav .gloal_menu_container {
		display: none;
	}    
}

以上です。