ドロップダウンして現れるメニュー
既成システムのCSSアレンジは、何も無い所からシステムを組むのとは異なるノウハウがあります。 この間「ブログ管理ページ」のアレンジをして来ましたが、この中で「左サイドメニュー」を「プルダウンメニュー」に仕立てるテクニックは、その好例です。
その手法はネットの各所に書かれています。 しかし、それを実用の環境上で説明するのは、CSSアレンジを手掛けるユーザーにとって有効だと思います。
偽のスイッチと透明な要素
ヘッダーの左端に「ブログ管理」のボタンがあります。 これは本来のヘッダーのラベルを利用したもので、リンクボタンの様な機能を持っていません。 枠や文字背景色でボタンのデザインにしていますが、本来クリックできる対象ではないのです。
しかし、ここにマウスを乗せると、メニューがプルダウンします。 これは、透明な要素をこのラベル上に配置して、それにマウスが乗った場合に、メニューが下方向に拡がるコードを仕組んでいるからです。
透明な要素は実はメニュー実体の外殻で、下のグリーンの部分です。 また、赤線で示した場所に、高さを「0」に縮めたメニューが隠れています。
実際の表示と、この透明要素のHTMLを Chrome DevToolsで示したのが下図です。
class名「l-ucs-sidemenu-area」の要素が、グリーンの透明要素です。 その内部に<li> が10個並んでいますが、これがサイドメニューの各ボタンの実体です。
要素「l-ucs-sidemenu-area」にマウスが乗った時（hover時）に、<li>要素の高さが「0」から「プルダウンの高さ」に変わるというCSSコードが、プルダウンの仕組みです。
一旦メニューがプルダウンすると、スイッチの「l-ucs-sidemenu-area」はプルダウンした<li>要素の外殻なので、「l-ucs-sidemenu-area」自身も拡がった事になります。 つまり、プルダウン部分にマウスがあれば hover状態が続き、プルダウンメニューが閉じる事はありません。
<li>要素のHTMLと詳細なCSSコードを Chrome DevToolsで示したのが以下です。
一番上のHTMLで、オレンジの●は「l-ucs-sidemenu-area」要素が hover状態である事を示しています。 下の青枠はプルダウンした <li>要素のひとつを選び、それを修飾するCSSを表示しています。
❶ は、非hover時の状態を意味していて、<li>の高さは「height: 0;」です。 これに消し線が入っているのは、現在が hoverの状態で ❷ の「height: 48px;」に変わっている事を表しています。 つまり、メニューが高さを持ったプルダウン状態を示しているわけです。
〔参考〕
ここの説明はプルダウンの仕組みについてですが、縦並びの<li>要素を、横並びにする方法には触れていません。 これは「display: flex」を親要素に指定し、親要素に充分な幅を指定すると、内部の要素が横並びになる事を利用しています。
操作性の向上に必要な「transition」指定
上記の実際のコードの意味は、「Ameblo Management」を「Stylus」にインストールして、メニュー動作の状態を「Chrome DevTools」で調べると、とても良く判ると思います。
さて、このページで一番書きたかったのは、上図でグリーンの部分の「transition」の使い方です。
このメニューは横に長いので、右端のメニューを押す場合は、ポインターを左端から右端まで移動させる必要があります。
その間に、ポインターが上の赤い範囲から少しでも外れると、メニューは閉じてしまいます。 これは操作性が良いデザインとは言えません。 そこで「transition」が必要になります。
先ず常態の指定 ❶ で「transition: .2s;」を指定しています。 これは ❷ も効果の範囲となり、メニューが開くのも閉じるのも「0.2sec」の時間を要して行われます。 これは、メニューがロールアップするのに「0.2sec」かかり、ほんの一瞬ポインタが反れただけなら閉じずに済みます。 もし次の「transition-delay」を使わない場合は、「transition」は「0.5～1sec」程度の指定が実用的です。
で、この例では「transition-delay」が肝心な役割を果たしています。 これは変化の開始までの遅延時間を指定するもので、ポインターが反れても、遅延時間内にポインターが戻れば、閉じずに済む事になります。
しかし、普通に❶ に「transition-delay: 1s;」を指定すると、メニューが閉じるまで1sec待ってくれる様になりますが、メニューを開く際も1sec待たされます。
そこで開く時は待たされない様にするために、❷ で「transition-delay: 0s;」を指定しています。（❶ ❷ が逆に感じますが、これで良いのです） これで、開く時はさっと開き、閉じるには1secの遅延が設定されます。
この「transition-delay」を指定しているので、「transition: .2s;」はメニューの開閉をスムーズに見せるための目的が主になっています。
以上の様に「transition-delay」を使うことで、ドロップダウンメニューの操作性を向上させ、アレンジを実用的なものにしています。 この手法は、色々なところで役にたつものです。