WEBサイトを構築する際、頭を悩ませることの一つに、「載せる情報を選別しなければならない」ということがあります。スペースが限られているし、雑多に見えてしまうからです。できれば情報は減らしたくないし、スペースも増やしたくない。そんな時に役立つのが「メガメニュー」です。今回は、WEBサイトでよく使用される「メガメニュー」をCSSで作成していきます。最後にメガメニューとはメガメニューを使用したサイト例HONDAhttps://www.honda.co.jp/「グローバルメニュー」と呼ばれる、WEBサイト共通のナビゲーションの情報量を増やすための仕組みです。通常であれば、並列に数個しか情報を置けない「グローバルメニュー」ですが、メニュー上にマウスを合わせる、もしくはクリックすると、内包されている情報を見ることができます。これは、少ないスペースを最大限に有効活用できる手法で、レイアウト次第では画像や動画を掲載することも可能です。」疑似クラスは、ユーザーがマウスなどのポインティングデバイスで要素に反応したものの、アクティブ化する必要がないものを選択します。普通はユーザーがマウスポインタ―で、要素の上をホバー(通過)させた時この状態になります。」を設定すると、設定した要素にマウスポインターを合わせた時「スタイルシートに設定した状態」へと変化させることができます。「メガメニュー」の中身は最初は隠しておき、マウスイベントで表示するようにします。「入れ子構造」にしていけば、更に複雑にしていくことも可能です。li:hover「inputタグ」を使用する以前記事で紹介した「inputタグ」を用いたテクニックを応用することで「メガメニュー」が作成できます。クリックしたかどうか判断できるので、こちらではアコーディオンメニューのような開閉する動きが実現できます。※本番では記事のURLを載せる。0.3s;}擬似クラスの「:checked」を利用し、クリックした状態かを判断します。inputを先頭に置くことで、セレクタ「~」を利用できます。これによりinputタグ以降のタグを対象にすることができます。最後に簡単なサンプルではありますが、CSSで「メガメニュー」を作成してみました。CSSだけで工夫次第で色々な動作を実現できます。簡単なホームページではJQueryやJavaScriptを使用しなくても、今回紹介したやり方で、奥行きを感じられるようなリッチなサイトを作成できます。過去の「inoutタグ」の記事も併せてお読みいただきCSSの可能性を感じていただければ幸いです。