1カラムページに開閉式サイドメニュー-Volar2

 

【Volar2】では1カラムページに限り、サイドメニューを開閉式で表示可能な”ハンバーガーメニュー”ボタンを表示させることができます。

 

当サイトトップページの画面右上にそのボタンがデモ表示されてるかと。

ただしPC表示時のみでスマホでは標準タイプのメニューが表示されます。

ページを1カラム仕様にすると元々あったサイドメニューは（下の画像のように）最下段に格納表示されます。

この場合（PCでの表示時に限りますが）、カテゴリーの数や記事数によっては（最大）3カラムでの表示になります。

 

 

※1カラム時のサイドメニューの表示レイアウト仕様はこちらの記事をご参照ください。

 

ただページを1カラムレイアウトにするぐらいなら下段に強制移動されたサイドメニューはない方が見た目の印象はすっきりします。

とはいえ重要なページへのリンクは必要なのでバナーなどでの補足は必要でしょう。

 

筆者は（サイドメニューがない）1カラム構成のサイトを訪問した時に「次に見たいページが探しにくい」という不便さをたびたび感じておりました。

かといって先の画像のようなレイアウトで最下段にサイドメニューを表示させるのも見た目的にちょっとアレだし。

 

ということで利用者の中にはこういう想いを感じている方もきっと多いに違いないという勝手な筆者の思い込みから、スマホでよく見かけるハンバーガーメニューを使って開閉式でサイドメニューを表示できる機能を【Volar2】に追加してみました。

（はたして需要があるのかどうかは微妙なところですが）

 

タイプは2種類

タイプは2種類用意してます。
1つはすべてのサイドメニューの中身をそのまま表示する通常タイプ。

 

 

もう一つはページ数が少ないサイト向けに、第1階層のみのエントリーぺージとカテゴリーフォルダのみを1段レイアウトで表示させるシンプル版です。（※カテゴリー内のエントリーページは非表示）

使う場面はそう多くはないでしょうが、試しに作ってみました。

 

 

 

【Volar2】の開閉式サイドメニューの主な仕様は以下の通り。

＜1カラムページに開閉式サイドメニュー＞はモジュールでの設定になります。

 

機能を有効化したページでは開閉式サイドメニュー内に本来のサイドメニュー（SIRIUS2では”メインメニュー”）の内容が格納され、最下段に表示されるはずのメインメニューは自動的に非表示となります。