如何使用HTML，CSS和JQuery在移动设备上制作从右侧滑动的菜单？

<div class="menu-container">
  <button class="menu-toggle">菜单</button>
  <div class="menu">
    <!-- 菜单内容 -->
  </div>
</div>

.menu-container {
  position: relative;
}

.menu-toggle {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9999;
}

.menu {
  position: fixed;
  top: 0;
  right: -300px; /* 初始状态下菜单隐藏在屏幕右侧 */
  width: 300px;
  height: 100%;
  background-color: #f1f1f1;
  transition: right 0.3s ease; /* 过渡效果，使菜单滑动 */
}

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.menu').css('right', '0'); /* 点击按钮时，将菜单滑动到屏幕可见区域 */
  });

  $('.menu').click(function() {
    $('.menu').css('right', '-300px'); /* 点击菜单时，将菜单滑动回屏幕右侧隐藏 */
  });
});