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

更新履歴等

2023.7.4 表示不具合を調整

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

2023.7.4 メガメニューを追加

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

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

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

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

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

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

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

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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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

最適なホームページ

を制作いたします

制作費用	クオリティを落とさずに価格を抑えたサイトを制作します
必要十分	お問い合わせフォーム、新着情報など必要なものが最初から揃っています
サポート	1年間のサポートがついて安心初めてでもホームページを活用できます

もっと詳しく