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

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

 

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

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

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

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

 

 

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

 

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

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

 

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

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

 

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

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

 

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

 

【サイト全体設定】の【レイアウト】設定で”1カラム（or ワイド）”に設定後、トップページであればテンプレート→HTMLテンプレート編集→トップページと開きます。

エントリーページならテンプレート→HTMLテンプレート編集→エントリーページと開きます。

 

開閉式サイドメニューを有効化するには以下の3ヵ所のモジュールのコメントアウトを解除します。

 

 

これで実装完了です。

 

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

2024年6月のSIRIUS2 ver.1.180にてテンプレート（和モダン）が追加されました。
それに伴い、超シンプルな開閉式サイドメニューも追加搭載しました。

 

デモはこちらのサイトでご確認できます。

 

『開閉式サイドメニュー・シンプル版』の特長は以下の通り。

 

つまりデモサイトの旅館サイトなどのように、エントリーページ数がさほど多くないサイト向けの超シンプルな開閉式サイドメニューとなってます。

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

 

 

使い方

基本的な使い方は先ほどと同じです。

ただし有効化するモジュール名が違います。

 

シンプル版で有効化するのは

というモジュールの方です。

 

こちらを有効化した場合は、もう一方の

[% module(【Volar2】PCでもサイドメニュー（スタイル）) %]

の方はコメントアウトして無効化しておきます。