ハンバーガーメニューのスライド方向

lstuartfry · 2021 年 11 月 3 日午後 9:10

みなさんこんにちは。モバイルデバイスで、ハンバーガーパネルがプロフィールパネルと同じように画面の右側からスライドアウトするように設定しようとしています。ハンバーガーパネルには left: 0 というルールが特別に存在しているのを目にしました。CSS を調整してみましたが、プロフィールパネルの左スライド動作を再現することができません。ハンバーガーパネルに特化した CSS はあまり多くないようですが、何が足りないのかよくわかりません。

何かヒントや気づきがあれば、教えていただけると嬉しいです！よろしくお願いします。

Johani · 2021 年 11 月 5 日午前 5:33

こんにちは、Lukas さん、Meta へようこそ

この実装で CSS はあまり関与していません。アニメーションは CSS で処理されますが、オフセットの値は JavaScript で設定されています。これは、ユーザーがメニューを閉じるために右または左にスクロールまたはパンするケースに対応するためです。

そのロジックの大部分は以下の場所にあります。これは一つのメソッドに過ぎず、そのファイルには他にもいくつかのメソッドが関与しています。

github.com/discourse/discourse

app/assets/javascripts/discourse/app/components/site-header.js

8a250a1ea


      
            "currentUser.unread_notifications",
            "currentUser.unread_high_priority_notifications",
            "currentUser.reviewable_count",
            "session.defaultColorSchemeIsDark",
            "session.darkModeAvailable"
          )
          notificationsChanged() {
            this.queueRerender();
          },
          
          _animateOpening(panel) {
            const headerCloak = document.querySelector(".header-cloak");
            panel.classList.add("animate");
            headerCloak.classList.add("animate");
            this._scheduledRemoveAnimate = later(() => {
              panel.classList.remove("animate");
              headerCloak.classList.remove("animate");
            }, 200);
            panel.style.setProperty("--offset", 0);
            headerCloak.style.setProperty("--opacity", 0.5);
            this._panMenuOffset = 0;

また、ユーザーが暗くされた背景をクリックしてメニューを閉じるケースを処理するロジックもあります。

ユーザーメニューの場合:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/user-menu.js

1472e47aa


      
          clickOutsideMobile(e) {
            const centeredElement = document.elementFromPoint(e.clientX, e.clientY);
            const parents = document
              .elementsFromPoint(e.clientX, e.clientY)
              .some((ele) => ele.classList.contains("panel"));
            if (!centeredElement.classList.contains("header-cloak") && parents) {
              this.sendWidgetAction("toggleUserMenu");
            } else {
              const windowWidth = document.body.offsetWidth;
              const panel = document.querySelector(".menu-panel");
              panel.classList.add("animate");
              let offsetDirection =
                document.querySelector("html").classList["direction"] === "rtl"
                  ? -1
                  : 1;
              panel.style.setProperty("--offset", `${offsetDirection * windowWidth}px`);
              const headerCloak = document.querySelector(".header-cloak");
              headerCloak.classList.add("animate");
              headerCloak.style.setProperty("--opacity", 0);
              later(() => this.sendWidgetAction("toggleUserMenu"), 200);

This file has been truncated. show original

ハンバーガーメニューの場合:

github.com/discourse/discourse

app/assets/javascripts/discourse/app/widgets/hamburger-menu.js

1472e47aa


      
          clickOutsideMobile(e) {
            const centeredElement = document.elementFromPoint(e.clientX, e.clientY);
            const parents = document
              .elementsFromPoint(e.clientX, e.clientY)
              .some((ele) => ele.classList.contains("panel"));
            if (!centeredElement.classList.contains("header-cloak") && parents) {
              this.sendWidgetAction("toggleHamburger");
            } else {
              const windowWidth = document.body.offsetWidth;
              const panel = document.querySelector(".menu-panel");
              panel.classList.add("animate");
              let offsetDirection = this.site.mobileView ? -1 : 1;
              offsetDirection =
                document.querySelector("html").classList["direction"] === "rtl"
                  ? -offsetDirection
                  : offsetDirection;
              panel.style.setProperty("--offset", `${offsetDirection * windowWidth}px`);
              const headerCloak = document.querySelector(".header-cloak");
              headerCloak.classList.add("animate");
              headerCloak.style.setProperty("--opacity", 0);

This file has been truncated. show original

ハンバーガーメニューを右側から開閉するように変更するには、以下の 2 つのことを行う必要があります。

site-header コンポーネントを ModifyClass を使って変更し、すべてのメニューを右側から開くようにします。現在、メニューのクラスを確認していますが、これを以下のようにオーバーライドします。
```
api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // 左側のメニューは不要なので false を返す
    return false;
  }
});
```
メニューを閉じる際にも、右側から閉じるようにします。スクロール/パンイベントについては、上記のスニペットですでに処理されています。次に、ユーザーが暗くされた背景をクリックするケースを修正する必要があります。Discourse は、サイトが RTL 言語を使用しているかどうかに基づいてこれを決定します。これを変更するには、ハンバーガーパネルがウィジェットであるため、別の plugin-api メソッドが必要です。

使用するメソッドは reopenWidget です。
```
 api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // コアからのコードを適用
    this._super(...arguments);

    // 次に、右側から閉じるように変更を加える
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});
```

その後、そのメニューのデフォルトスタイルを上書きするために、いくつかの CSS 行を追加するだけです。

.hamburger-panel,
.user-menu {
  .menu-panel.slide-in {
    left: unset;
    right: 0;
  }
}

これらすべてをまとめると、テーマの mobile > header タブに以下のコードを記述します。

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:site-header", {
  pluginId: "right-side-mobile-hamburger",
  _leftMenuClass() {
    // 左側のメニューは不要なので false を返す
    return false;
  }
});

api.reopenWidget("hamburger-menu", {
  clickOutsideMobile() {
    // コアからのコードを適用
    this._super(...arguments);

    // 次に、右側から閉じるように変更を加える
    const panel = document.querySelector(".menu-panel");
    const windowWidth = document.body.offsetWidth;
    panel.style.setProperty("--offset", `${windowWidth}px`);
  }
});
</script>

そして、mobile > CSS タブには以下のコードを記述します。

.hamburger-panel,
.user-menu {
  .menu-panel.slide-in {
    left: unset;
    right: 0;
  }
}

テーマを保存してページをリフレッシュすると、ハンバーガーメニューはモバイル端末で右側から開閉するようになります。これはユーザーメニューと同じ動作です。

asirota · 2021 年 11 月 5 日午前 9:13

それが完全な回答のあり方です。よくできました！

lstuartfry · 2021 年 11 月 5 日午後 5:46

素晴らしいですね！Joe さん、詳しいご回答を本当にありがとうございます！A+ クラスの顧客サポートで、感銘を受け、心より感謝しております。

トピック		返信	表示
Proposing a left-aligned slide out hamburger menu Feature	78	11453	2018 年 12 月 15 日
Hamburger menu for RTL Bug	7	2465	2015 年 9 月 17 日
Full height, slide out hamburger menu Feature rfc , spec	34	14190	2015 年 9 月 16 日
Switch the new sidebar from left to right side (english forum) Feature sidebar	31	2887	2025 年 1 月 15 日
Move the hamburger menu icon to match the location on mobile Support	5	186	2025 年 1 月 19 日

ハンバーガーメニューのスライド方向

関連トピック