[HTMLパーツ] メニュー項目サンプル #3「多階層対応+cssのみ」

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

メニューサンプルはどのホームページでも使われていて比較的利用頻度が高いと思いますが、僕の追求するポイントとして、「WEBサイトをいかに軽くするか」というスピード高速化があります。
 

これまでのメニューサンプルは、javascriptを使ってインタラクティブに構築してきましたが、今回はそれらを踏襲して、jsを使わずにcssとhtmlのみで同じようなメニューを作ってみました。
 

やってみて思ったのは、ハードルが高いかと思ったけど、意外とチョロかったですね。
 

何故なら前回とほぼ同じコードで一部だけを書き換えただけで、css化が成功したので、世の中のjQueryに頼らないと何もできないホームページしか作れないエンジニアを嘲笑ってやりたくなりました。

デモ


 

JS版との動作の違い

js版と明確に違うのは、クリックして子階層が表示していたのを、マウスオーバーで子階層表示する点です。
 

この仕様はcssではどうしても対応できずに、致し方ない仕様になってしまいました。
 

一応何故かわからない人の為に解説しておくと、クリック動作はactiveというcss処理でも似た処理を持っていますが、マウスボタンを押している間しか処理できないので、クリックに該当するイベントがないというわけです。
 

代わりに、マウスオーバーは、hoverとして、便利に使えるため、多くのサイトでこの処理を採用しているケースも多いでしょう。
 

とりあえず、若干の操作感は違いますが、子階層を表示してそのリンクボタンを押す事ができるので、目的は達成できます。
 

ソースコード

 

 

解説

ポイントとしては、前回[data-view=”1″]と書いていた箇所が、jsでフラグと切り替えていた処理だったので、この時をマウスオーバーの処理にすれば、イベント処理が使えるようになります。
 

なので、そのまま”:hover”と書き換えてやっただけなんですけどねwww
 

そして、jsを使わなかった分、WEBページの処理も軽くなり、jsのソースコードの文字数分、サーバアクセストラフィックが減少する、いい事づくしだ!

Leave a Reply

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