ここでは、メニュープラグインのテンプレートサンプルを配置して、動きの違いについてを解説します。
- Default
- ディレクトリ展開式
- ディレクトリ展開式(デザイン用) ★
- タブ
- タブフラット
- ドロップダウン
- マウスオーバードロップダウン
- マウスオーバードロップダウン(ルートなし)
- マウスオーバードロップダウン(ルートのリンクなし)
- マウスオーバードロップダウン(ルートのリンクなしデザイン用) ★
- マウスオーバードロップダウン(ルートのリンクなしアイコン用) ★
- パンくず
- サイトマップ
- サイトマップ(ルートのリンクなし)
- フッター用サイトマップ ★
- フッター用サイトマップ(ルートのリンクなし) ★
- 親子のみ
- 親兄弟
- ハンバーガー
- ハンバーガーメニュー
- ドロップダウンハンバーガー
- マウスオーバードロップダウンハンバーガー
★…デザイン用CSSを充てる事が前提であるものなので、単独では使用しません。
★がついていない上でリンクが張られていないメニューテンプレートは、今後随時説明を追加していきます。
【Default】
サイドメニュー等に利用する、縦並びのテンプレート。
下層ページが全部開いている。
【ディレクトリ展開式】
サイドメニュー等に利用する、縦並びのテンプレート。
カレントページ(今表示しているページ)の階層のみが開く。
【タブ】
ヘッダーメニュー等に利用する、横並びテンプレート。
最上位ページのみが横に並ぶ。下層ページは並ばない。
スマホで見た時は消える。
【タブフラット】
ヘッダーメニュー等に利用する、横並びテンプレート。
表示可能なページを、階層構造を無視してフラットに表示する。
スマホで見た時は消える。
【ドロップダウン】
ヘッダーメニュー等に利用する、横並びテンプレート。
最上位ページを横並びで表示しつつ、当該ページに下層ページが存在する時、
カレントページ(今表示しているページ)の階層をクリックするとドロップダウンが開く。
カレントページ(今表示しているページ)の最上位ページへ移動したい場合には、表示された下層リストの中に出てきた最上位ページを押す。
別階層のページをクリックした場合には、そのページへと移動する。
スマホで見た時は消える。
【マウスオーバードロップダウン】
ヘッダーメニュー等に利用する、横並びテンプレート。
最上位ページを横並びで表示しつつ、当該ページに下層ページが存在する時、
マウスオーバー、もしくはクリック(タップ)すると、下階層が開く。
最上位ページへ移動したい場合には、表示された下層リストの中に表示された最上位ページを押す。
スマホで見た時は消える。
【マウスオーバードロップダウン(ルートなし)】
ヘッダーメニュー等に利用する、横並びテンプレート。
最上位ページを横並びで表示しつつ、当該ページに下層ページが存在する時、
マウスオーバー、もしくはクリック(タップ)すると、下階層が開く。
開いた下層リストの中に、ルート(最上位ページ)がない為、最上位ページへの移動はできない。
スマホで見た時は消える。
【マウスオーバードロップダウン(ルートのリンクなし)】
ヘッダーメニュー等に利用する、横並びテンプレート。
最上位ページを横並びで表示しつつ、当該ページに下層ページが存在する時、
マウスオーバー、もしくはクリック(タップ)すると、下階層が開く。
開いた下層リストの中に、ルート(最上位ページ)の表示はあるが、リンクされていない為、最上位ページへの移動はできない。
スマホで見た時は消える。
【パンくず】
現在のページの階層を表示する為の「パンくず」リンクを表示するメニュー。
カレントページ(今表示しているページ)とその親~最上位ページまでが表示される。
【サイトマップ】
サイトマップ用メニュー。
サイト上の表示可能なページを階層構造で一覧表示する。
【サイトマップ(ルートのリンクなし)】
サイトマップ用メニュー。
サイト上の表示可能なページを階層構造で一覧表示する。
しかし、ルート(最上位ページ)へのリンクがない。
【親子のみ】
サイドメニュー等に利用する、縦並びのテンプレート。
カレントページ(今表示しているページ)の階層のみが開く。
【親兄弟】
サイドメニュー等に利用する、縦並びのテンプレート。
カレントページ(今表示しているページ)の階層がひらく。
また、カレントページ(今表示しているページ)と同レベルのページも表示する。