[HTMLパーツ] メニュー項目サンプル #6「サイドメニューマルチ階層対応」

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

ホームページのサイトマップって何故必要なのか考えたことありますか?
 

SEO対策として、SearchConsoleを使って、クローラーボットに対しての設定を行いますが、
 

この作業はクローラーに対してサイト内にあるページを提示しているワケですが、そもそも情報サイトやブログ・サイトなどは、動的にどんどんページが作成されていき、中にはページURLが時間をかけ合わせたユニークコードになってしまうサイトもあります。
 

こういう動的URLのサイトはSEOにはあまり向かないという事もまことしやかに言われていますが、確かにWEBサイトをクローリングする際にそういう仕様のWEBページって厄介であることは感じますね。
 

そうするとサイトマップは固定ページを提示するという仕様を提示する重要な仕様書であると考えられます。
 

あんまりトリッキーなWEBサイトを構築してはいけないというあらわれなのが、サイトマップであるとも考えられますね。
 

そして、そこで重要なのがサイトマップのxmlデータと加えて、ページ内リンクでしょう。
 

ユーザーが直感的に理解できるのはメニュー項目で、そこがゴッチャゴチャのサイトは正直玄関先が散らかっている自宅に訪れた感覚になり、それはもう不安でしかないですよね。
 

サイト内のページが多くなりすぎて、メニューをスッキリみせたい人の為に、サイドメニューも多階層化してみました。

Demo

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

ソース

 

 

 

解説

今回もこれまで作ってきたヘッダメニューと同じ構成を貫いています。
 

サイドメニューをクリックして子階層がある場合は、右側にリストがポップアップされます。
 

単純にLIタグを”position=relative”にすることで座標を気にせず簡単に表示することが出来るようになります。
 

デザイン的に気をつけないといけないのは、メニューの縦幅と横に表示される縦幅を揃えないと少し違和感が出ていたので、細かい点ですが子階層がもっさりしてしまっているのはご愛嬌ですね。

Leave a Reply

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