お知らせ(CSSで作るメガメニュー)|YORIYORK|栃木県佐野市

お知らせ

news

CSSで作るメガメニュー

2019.9.1

cssで作るメガメニュー_アイキャッチ
Yoriyork WEBチームです。

WEBサイトを構築する際、頭を悩ませることの一つに、「載せる情報を選別しなければならない」ということがあります。
スペースが限られているし、雑多に見えてしまうからです。
しかし、できれば情報は減らしたくないし、スペースも増やしたくない。
そんな時に役立つのが「メガメニュー」です。
今回は、WEBサイトでよく使用される「メガメニュー」をCSSで作成していきます。

メガメニューとは

メガメニューを使用したサイト例

HONDA
https://www.honda.co.jp/

HONDAサイト_トップページ_画像

「グローバルメニュー」と呼ばれる、WEBサイト共通のナビゲーションの情報量を増やすための仕組みです。
通常であれば、並列に数個しか情報を置けない「グローバルメニュー」ですが、メニュー上にマウスを合わせる、もしくはクリックすると、内包されている情報を見ることができます。
これは、少ないスペースを最大限に有効活用できる手法で、レイアウト次第では画像や動画を掲載することも可能です。

メガメニューの作成方法

擬似クラス「:hover」を使用する

HTML

CSS

:hover – MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/:hover

>>CSS の「 :hover 」疑似クラスは、ユーザーがマウスなどのポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。
普通はユーザーがマウスポインタ―で、要素の上をホバー(通過)させた時この状態になります。

「 :hover 」を設定すると、設定した要素にマウスポインターを合わせた時「スタイルシートに設定した状態」へと変化させることができます。
「メガメニュー」の中身は最初は隠しておき、マウスイベントで表示するようにします。
「入れ子構造」にしていけば、更に複雑にしていくことも可能です。

「inputタグ」を使用する

以前記事で紹介した「inputタグ」を用いたテクニックを応用することで「メガメニュー」が作成できます。
クリックしたかどうか判断できるので、こちらではアコーディオンメニューのような開閉する動きが実現できます。

※本番では記事のURLを載せる。

HTML

CSS

擬似クラスの「:checked」を利用し、クリックした状態かを判断します。
inputを先頭に置くことで、セレクタ「~」を利用できます。
これによりinputタグ以降のタグを対象にすることができます。


最後に

簡単なサンプルではありますが、CSSで「メガメニュー」を作成してみました。
CSSだけで工夫次第で色々な動作を実現できます。
簡単なホームページではJQueryやJavaScriptを使用しなくても、今回紹介したやり方で、奥行きを感じられるようなリッチなサイトを作成できます。
過去の「inoutタグ」の記事も併せてお読みいただきCSSの可能性を感じていただければ幸いです。

Author:admin|Category:WEBチーム

\ お気軽に一度ご相談ください! /

お問い合わせ•ご相談はこちら
求人情報
PAGE TOP