有没有一种方法可以创建一个菜单栏，当点击按钮时，它会保持不变，但内容会有所不同

<div class="menu">
  <ul>
    <li id="item1">菜单项1</li>
    <li id="item2">菜单项2</li>
    <li id="item3">菜单项3</li>
  </ul>
</div>
<button id="button">点击按钮</button>

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

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.menu li:hover {
  color: blue;
}

var button = document.getElementById("button");
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

button.addEventListener("click", function() {
  // 修改菜单项的内容
  item1.innerHTML = "新的菜单项1";
  item2.innerHTML = "新的菜单项2";
  item3.innerHTML = "新的菜单项3";
});