如何创建仅用于移动设备的折叠菜单页脚

<div class="footer">
  <button class="toggle-btn">菜单</button>
  <ul class="menu">
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</div>

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 10px;
}

.toggle-btn {
  display: block;
  width: 100%;
  text-align: center;
  background-color: #ddd;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.menu {
  display: none;
  list-style: none;
  padding: 0;
}

.menu li {
  padding: 10px;
  background-color: #fff;
}

.menu li a {
  text-decoration: none;
  color: #333;
}

document.querySelector('.toggle-btn').addEventListener('click', function() {
  var menu = document.querySelector('.menu');
  if (menu.style.display === 'none') {
    menu.style.display = 'block';
  } else {
    menu.style.display = 'none';
  }
});