横メニュー演出についての考察

横メニューは、企業サイトの場合は5個程度が並んでいたりして、文言が「会社概要」とか「サービス」とかが良く使われる文言だったりで、ページ上部にカテゴリリンクとして横に並べてあるデザインがあがってくると、web制作者のみなさんがほぼ毎回の作っているパーツだと思います。
サービス内容がたくさんある場合などは、マウスホバーでボックス表示してサブメニューを並べてみたり、 縦にサブメニューをプルダウンしたりするのが一般的かと思います。

このページはサブメニューは省略して、横メニューをマウスホバーした時のそのボタン自体のtransitionアニメ演出をいろいろ実験してみました。

十数年前のテーブルレイアウト全盛期の頃は全体のテーブルの中にメニュー用のテーブルを用意して作ってましたが、今では横メニューやタブメニューは [ ul li a ] で作るのが一般的になっていて、横に並べる方法として、liを 「float:left & clear:both」「inline-block」「position と top と left」などいろいろあったりします。

原森webでは時々でいろいろ違う方法を実験したりしてますが、このページの実験サンプルでは [ul＆li(+a)]系のタグを「inline-block」で並べる形でサンプルを作ってみました。

ul・li・aタグで横メニューを作ってみると、div図形の1個のタグと b & a の3つという不自由さがないので、案外いろいろアニメ演出もしやすいかと思ったりします。

横メニュー悩みどころは、マルチデバイス対応レスポンシブサイトにした場合の処理かと思います。

案としては、 『横メニューを小さくして横に並べるデザインは変えない』 『縦メニューにする』 『アイコンメニューにする』 『スマホサイズでは色テイストだけ同じで、デザインは違うものにする』 などいろいろあるかと思います。
このページのサンプルの場合は、ブラウザのウインドウ横幅を短くすると、 メディアスクリーンで別のcssを呼び、 メニューの幅や文字サイズを小さくする、という方法で対応しています。

また、このページでは関係ないですが、 レスポンシブなサイトの横メニューにボックスやプルダウンのサブメニューがある場合はどうするのか？
というのが頭を悩ませてくれるポイントかと思います。

『プルダウンのサブメニューがあるので [縦メニュー] にできないので [横メニュー] のままで文字を短くする』
いやいや、『 [横メニュー+プルダウン] は、[縦メニュー+アコーディオン] 一択 』などといろいろ考えるかもしれません。

例えば、「一択ではない」ことを原森的に考えてみたアイデアをこのサイトで販促アピール的に使っているものとして、
[CSS研究カテゴリ] のページで、[横メニュー+プルダウン] を [縦メニュー+プルダウン] にしています。

そのページの横メニューのホバー演出は、メニュー文言が3D回転する演出効果（このページのサンプル4の1つ目）とサブメニュがプルダウン表示するものとなっています。
通常は横メニューからのプルダウンになり、ウインドウサイズが小さくなった場合には縦メニューからのプルダウンに変化するようにメディアスクリーンで別cssを呼ぶ形で設定したりしています。

3D回転などは IEが「transform-style:preserve-3d」にちゃんと対応してくれればもっといろいろできるのに……などと思ったりする今日この頃です。

主なcssやテクニック

:hover

マウスホバーの擬似クラス

transition

時間的変化を指定するcssプロパティ

animation

アニメを指定するcssプロパティ

@keyframes

アニメのキーフレーム指定

transform

要素の変形を指定するcssプロパティ

ページトップへ