[HTMLパーツ] メニュー項目サンプル #2「多階層対応」

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

HTMLのそれぞれのパーツのサンプル集を掲載してくれているサイトは非常に便利ですが、それをコピペで使っているエンジニアは、僕は個人的に仕事をするとぬるすぎてイライラしてしまいます。
 

まあ、100歩譲って、コピペして効率アップをしてもいいとしても、自分でコーディングするというクリエータースタイルを持ったエンジニアの方が一緒に仕事をしていて質の良いモノを作り出せた経験があるので、ライブラリやコピペに頼るエンジニアはどうしてもいただけません。
 

そんなわけで、前回作ったホームページで使えるパーツのヘッダメニューを多階層対応版にバージョンアップしたので、デモとともにソースコードを載せておきます。
 

コピペするなり、コードをいじくって改良するなりしてお楽しみください。

デモ

See the Pen
Menu-2 Multilayer
by YugetaKoji (@geta1972)
on CodePen.

ソースコード

 

 

ちょこっと解説

前回のヘッダメニューは1階層のみでしたが、今回は多階層という事で、MacOSの画面上部メニューを意識して作ってみました。
 

今どきのホームページ用にサイズを大きめにしていますが、サイズと色を合わせるだけで全く同じ表現ができると思いますよ。
 

そして今回の改修ポイントは、上部階層もネストが深くなった階層でも、同じ関数で実行されるという点と、リスト階層の仕組みをどの階層でも同じにして「シンプル」を意識して行いました。
 

dropdownのクリックイベント埋め込みを “.menu-bar > ul …”となっていたのを”.menu-bar ul …”と変更して、下層全てに対応させるだけなのですが、全ての階層を同じ構造にするからこうした事が可能になるんですね。
 

そして、ページ読み込み直後に、小階層があるリンクポイントに”data-dropdown=’1′”という属性値を埋め込んでいるんですが、ここも仕組み化さえできてしまえば非常に効率的に行えてcss連動でページ自体も動作が軽くなります。
 

最も注意した点は、第1階層は、常に表示されているメニューで第2階層は、下に表示されるのですが、それ以降の階層はメニューの右側に表示されるように、MacOSを意識して作っています。
 

最後にバグではないのですが、実現できていない機能として、画面のはみ出し対応は何も処理をしていません。
ページのスクロールバーが表示されてしまいます。
 

MacOSではどうなっているかというと、画面右端いっぱいになった場合は、右サイド表示が左サイド表示に切り替わります。
あと、小階層のメニュー数が多すぎた場合は、メニューの位置が画面サイズいっぱいに入るポジションに移動して、内部がスクロール対応するようになりますが、これも全く対応させていません。
 

どうしても必要になったら、またバージョンアップ版を作るとしましょう。
 

今回はここまで!

Leave a Reply

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