モバイルボタンのサイドバーを左からスライド表示に変更する方法

はじめに

モバイルボタンのサイドバー（#sidebar）は、デフォルトで右→左にスライド表示されます。

しかし、モバイルボタンが画面の左側に配置されている場合、スライド表示に違和感が生じることがあります。

そこで、サイドバーのスライド表示を左→右に変更します。

この記事では、この方法について説明します。

完成イメージ

実装方法

以下のコードをstyle.cssに追加します。

.sidebar-menu-content {
  left: 0;
  right: auto;
  transform: translateX(-105%);
}

応用：モバイルボタンのメニューを右からスライド表示

モバイルボタンのメニュー（#menu）についても、同様に左→右ではなく、右→左にスライド表示させることが可能です。

実装手順

以下のコードをstyle.cssに追加します。

.navi-menu-content {
  left: auto;
  right: 0;
  transform: translateX(105%);
}

さいごに

今回紹介した方法を使えば、モバイルボタンのサイドバーやメニューのスライド表示を直感的で自然な動きにカスタマイズできます。
特に、ボタンの配置位置に合わせたスライド方向の調整は、ユーザーエクスペリエンスを向上させる上で効果的です。