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

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

ホームページのサイドメニューって使っているサイトの殆どが、左側に設置されていますが、何故左側なのかご存知ですか?
 

実際には右側にサイドメニューを表示しているページもありますが、多くのホームページ制作者や、UIデザイナーなどが、サイト情報として、サイトマップの代わりになりえるメニュー項目を上部、左側に設置することで、文字を左から右に読む日本や英語の文化で基本情報として最初に認識されるからなのだそうです。
 

SEOではサイトマップが非常に重要なのは、ページ構成が整っているかどうかは、ホームページ全体の情報整理がキレイかどうかという現れでもあります。
 

逆に考えると、ページでいちばん重要なコンテンツを表示したい場合は、右側メニューにしてみると、マーケティング効果がでそうですね。
 

いわゆる「ファーストビュー効果」というやつです。
 

前置きが長くなりましたが、今回から再度メニューのサンプルを作りためしておこうと思います。
 

今回は一番シンプルな2階層メニューです。

デモ

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

ソースコード

 

 

解説

基本的にはヘッダーメニューとほぼ同じ構成にしていて、cssにより横並びを縦並びに変更しています。
 

ヘッダーメニューと併用して使う場合の事を考慮して、親要素のclass名で切り替えが出来るようにしています。
どちらも、内部構成には、ul,li,aタグのみで簡単に構築できるように設計しました。
 

data-viewを「0」、「1」で切り替えられるようにしている仕様もヘッダーと同じですが、javascriptを使って行うパターンです。
cssのみのバージョンは後日公開いたします。

Leave a Reply

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