1カラムトップページに開閉式サイドメニュー

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

 

トップページを1カラム仕様にすると元々あったサイドメニューは様最下段に格納表示されます。
この場合（PCでの表示時に限りますが）、カテゴリーの数や記事数によっては3カラムでの表示になります。

 

 

ただトップページを1カラムにするぐらいなら横にだだっぴろいサイドメニューはない方が見た目の印象はすっきりします。
もちろん重要なページへのリンクは必要なのでバナーなどでの補足は必要でしょう。

 

このサイドメニュー非表示設定ですが、SIRIUS2では【サイト全体設定】の【レイアウト】設定で1クリックでサイドメニューを非表示にできます。

 

 

しかしながら利用者にしてみればサイドメニューはあった方が便利と言えば便利です。
そこで【Volar2】ではスマホでよく見かけるハンバーガーメニューを使って開閉式でサイドメニューを表示できる機能を追加しました。

 

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

• PC表示時かつ1カラムトップページのみでの表示限定。
  （モバイルではSIRIUS2標準のグローバルメニューが表示されます）
• メニューボタンはブラウザ右上固定表示。
• メニューボタンをクリックすると右からサイドメニューの内容がスライドインし、ブラウザ幅約80%ぐらいの位置まで広がって表示。×ボタンクリックでスライドしながら閉じる。
• サイトの背景がどんな色でも通用するよう、ハンバーガーメニュー（三本線）には背景がうっすら見える程度の白の背景枠を設定済み。
• 開いたときのサイドメニューの中身・レイアウトは先のSIRIUS2標準の1カラム時のサイドメニューの表示内容・レイアウトと同じ。
  （ただし「開閉式サイドメニュー」機能をONにすると、先の設定で『1カラム時のサイドメニューを表示する』にしていても最下段に表示されるはずのサイドメニューは強制的に非表示になります）

 

有効化するには専用モジュールのコメントアウトを解除する必要があります。

 

【テンプレート】→【HTMLテンプレート編集】→【トップページ】と開き、以下の3つのモジュールのコメントアウトを解除します。

 

 

これで実装完了です。