[HTMLパーツ] メニュー項目サンプル #5「サイドメニュー2階層パターンCSS-only」

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

「ホームページのメニューを制するものは、WEBマーケティングを制す」とはよく言ったもので・・・
 

ウソです。誰もそんな事は言ったこと無いし、聞いたこと無いし、今はじめて書いてみました。
 

しかし、ホームページを制作している人あるあるですが、あって当たり前、項目のセットは簡単にできると思われがちなメニュー項目は意外と製作依頼者からの問い合わせが多い箇所でもあります。
 

ホームページを作り終わってから、「あの項目消しといて」とか「新たに追加しておいて」などはまだよく、「スマホで使いづらいので折りたたみはやめて」とか、「サイズをもっと大きくして」などなど・・・
 

おそらくユーザー側も問い合わせするレベルではないが、ホームページで最初に見る箇所、触る箇所は、大体において「メニュー項目」であることがほとんどのはずです。
 

こうした「メニューマーケティング」もしかしたら改善ポイントにより、サイトコンバージョンをアップさせるポイントにもなりえるかもしれませんね。
 

「PMO」(PageMenuOptimyzation)というジャンルはプロマネ用語と似ていますが、新たに立ち上げてもいいかもしれませんね。
 

こういうネタ、得意なんですよね・・・
 

というわけで、本日も前回に引き続いてサイドメニューサンプルをお届けします。
今回はCSSのみのバージョンでJavascriptを使わないヤツです。

デモ

See the Pen
Side-Menu-1-css
by YugetaKoji (@geta1972)
on CodePen.

ソースコード

 

 

解説

ヘッダーメニューと同じ構成なのでCSSのみでの仕様も全く同じです。
 

[data-view=”1″]をhoverに変更して、[data-view=”0″]を削除しています。
 

それから、liタグには、data-dropdownを記述する必要があるので、子階層があるモノには属性をつけてください。
 

細かい仕様ですが、子階層の項目をクリックしても画面遷移させないように、aタグのhref属性に”javascript:void(0)”を登録しておきましょう。
 

これだけで、jsを使わなくて非常に高速でかつ、処理負荷がかからないページになるので、おすすめです。
 

ただし、モバイルの場合はhover対応ができないので、使えません・・・orz

Leave a Reply

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