エレメンターページビルダーでオフキャンバスメニューを作成する
WordPress 人気ページビルダーであるエレメンターはオフキャンバスメニュー機能を提供しませんが、プラグインを使用するか、エレメンタープロのポップアップビルダーを使用してオフキャンバスメニューを実装できます。
エレメンターページビルダーでオフキャンバスメニューを作成する
WordPress テーマやプラグインには「オフキャンバス」という用語がよく使われます。 オフキャンバス（Off canvas）についてグーグルしてみると、「ビューポートの左、右、または下に表示されるJavaScriptに切り替えるサイドバーコンポーネント」と説明されています。
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.
Elementorではオフキャンバスメニュー（フライアウトメニュー）機能は提供していませんが、 エレメンプロのポップアップビルダーを利用してオフキャンバスメニューを作成できます。
エレメントポップアップビルダーでオフキャンバスメニューを作成する
次の順序でエレメントでオフキャンバスメニューを作成できます。
- エレメンタープロを有効にして テンプレート>ポップアップで新しいポップアップを作成します。
- ポップアップを最初から作成することもできますが、ライブラリからお気に入りのポップアップテンプレートをロードして修正すると便利です。 オフキャンバスメニューレイアウトのテンプレートを選択して変更できます。
- ポップアップテンプレートで適切な場所にメインナビゲーションを追加し、他の要素を追加するようにします（例：画像）。
- テンプレート>テーマビルダー> Headerでヘッダーテンプレートを作成するか、既存のヘッダーテンプレートを編集します。
- メインナビを削除し、代わりに ボタン 要素を追加します。
- ボタンの外観をハンバーガーメニューアイコンに変更し、リンクに動的タグを選択します。 その後、 Actions > Popupを選択してポップアップテンプレートを指定します。
その後、上の画像のようにハンバーガーメニューをクリックするとオフキャンバスメニューが表示され、閉じるボタンをクリックするとメニューが閉じます。
基本的な概念はボタンをクリックするとポップアップが表示される機能を応用したもので、ボタン形状をハンバーガーアイコンに設定し、ボタンリンクフィールドで動的タグを選択してから Actions > Popupを選択してポップアップテンプレートを指定します。
エレメントポップアップ機能の詳細は、「WordPress エレメンターページビルダーポップアップの作成「を参考にしてください。
下にスクロールするとヘッダーを非表示にし、上にスクロールするとヘッダーを表示する
そして、上の画像でマウスを下にスクロールするとヘッダーが隠され、マウスを上にスクロールするとヘッダーが表示される機能が適用されています。 この機能は数年前 ミディアム(Medium)という有名なオンラインパブリッシングプラットフォームで使用されたもので、今は使用されていません。 このように画面を下にスクロールするときにヘッダーを非表示にすると、訪問者が記事を読むことに集中できるという利点があるようです。
これらのスクロール機能を実装するにはJavaScriptを使用する必要があります。 Diviテーマのメニューがミディアムのように機能する方法をこのブログで紹介したことがあります。
次のjsfiddleサイトで共有されているコードを適用できます。
エレメンタで応用する方法について別の記事でまとめてみましょう。