固定ページをメガメニューとして使用したカスタマイズ例

カテゴリー: Lightning G3、カスタマイズ

タグ: CSS jQuery アクションフックメガメニュー

更新履歴等

2023.7.4 表示不具合を修正

マウス移動時にメガメニューが消えてしまう不具合を修正しました。
業務案内 ⇔ ブログのメガメニューが意図せずに切り替わってしまう不具合を修正しました。(マージン・パディング)

2023.7.4 メガメニューを追加

グローバルナビの「ブログ」のメガメニューを追加しました。「業務案内」のメガメニューとは実装方法が異なっています。

2023.7.9 「ブログ」のメガメニューに動画を追加

グローバルナビの「ブログ」のメガメニューに動画を追加しました。固定ページをメガメニューとして表示していることにより、お客様側で動画の差し替えを容易に行っていただけます。

2024.3.3 メガメニューの動きを調整

メガメニューが開くときに上から下がってくるような動きを追加しました。

2026.1.20 表示不具合を修正

WordPress 6.9 の新機能であるブロックスタイルのオンデマンド読み込みのためにメガメニューの表示がくずれたため、プラグイン Load Combined Core Block Assets バージョン 1.0.0 をインストールして修正しました。

6.9.1 で問題が解決されたらこのプラグインは不要になる見込みです。

このサイトのグローバルナビにメガメニューを実装しました。

メガメニューを表示しているやり方

2つのメガメニューを表示しているやり方は以下のように違っている。

メガメニュー	やり方	メガメニューのID
業務案内	jQuery	mega_menu_demo_1
ブログ	CSS	mega_menu_demo_2

CSS でいろいろできるようになった現在だと、後者（ブログ）のやり方の方がスマートだと思う。

固定ページをメガメニューとして表示

グローバルナビで「~~業務案内~~メガメニュー」または「ブログ」にマウスを合わせると、以下のようにメガメニューが表示されます。

このメガメニューは以下の固定ページのコンテンツを表示するようにカスタマイズしてあります。

固定ページを使うメリット

固定ページをメガメニューとして使うメリットは以下の通りです。

柔軟なレイアウトが可能、しかもかんたんにできる
メガメニューのコンテンツを HTML や PHP などのコードを駆使して記述するやり方もありますが、このやり方はコーディングの作業工数がかかります。それに対して、固定ページを使うやり方だとさまざまなブロックを組み合わせて短時間で柔軟なレイアウトが実現可能です。
今回の実装例では、VK Blocks Pro のグリッドカラムカードブロックを使うことにより作業時間を大幅に短縮していて、その結果として制作費用を抑えることができています。
コンテンツの追加・変更がかんたんにできる
作業がノーコードでできますので、HTML や CSS などの知識を必要とせず、お客様ご自身で追加・変更していただけます。

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

魚沼情報サービスへのお問い合わせ

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら