[HTMLパーツ] メニュー項目サンプル #7「サイドメニューアイコン多階層表示」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

最近のホームページの傾向は、文字サイズを大きめにして、アイコンなどのピクトグラムを活用し、表示の細かな箇所までアニメーションを施すという事で、見栄え、使い勝手などを向上させているようです。
 

メニューがたくさんあるサイトは、機能が多く使いづらい、探すのが大変・・・などというネガティブな意見が出やすいのですが、逆に言うと、機能が多くてわかりやすく使いやすいサイトであれば、何ら問題が無いという事でもあります。
 

これまで作ってきたサイドメニューは、比較的大きめのサイドメニューで表示していたため、PCで表示していたとしても、画面内のサイズが比較的大きい割合を占めてしまっていたので、今回はアイコンベースにしてそれの多階層にしてみたいと思います。
 

デモ

See the Pen
side-menu(icon-version)
by YugetaKoji (@geta1972)
on CodePen.


 

機能解説

今回のバージョンの特徴は、アイコンメニューの為、スペースをとらないという事に焦点を定めました。
 

そして、多階層にする為に、サブメニューを表示している時には、コンテンツ部分に半透明エレメントを被せて誤クリックをしないようにも工夫しています。
 

また、サブメニューの表示には、細かなアニメーションを入れ込んで、表示のスライドインを見た目で体感できるようにしています。
※こういうアニメーションって、仕様設計の時に記述しずらいので、やはり実際にサンプルコードを書いたほうがいいんですね。

ソース

ソース解説

今回は、アイコンを使用するためIMGタグを使った画像を設置してもいいのですが、あえてCSSにbase64を書き込んでアイコンファイルを使わないという横着をやってみました。
 

でも、慣れるとこっちの方が扱いやすくなるかもね。
 

ちなみに、svgファイルをbase64に変換するのは、下記のサイトで簡単に行なえます。
 

https://lab.syncer.jp/Tool/Base64-encode/
 

サブメニュー表示のクリックと、コンテンツ部分に覆いかぶさる半透明エレメントの連動をしっかりコントロールしないといけないのをjavascriptで制御しています。
 

今回はこれまでで一番長いソースコードになってしまいましたが、cssのネイティブの書き方だとどうしてもトリッキーなことをやると、長くなってしまう傾向がありますね。
 

@mediaクエリーを使って、もっと便利にDOM構造の階層をコントロールできればいいのに・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です