请添加一个类似于<的按钮可以把他们收起成一个格子并添加动画

好的，以下是一个示例代码，可以添加一个收起按钮，并添加动画效果：

HTML 代码：

<nav class="side-nav">
  <ul>
    <li><a href="#send">寄送快递</a></li>
    <li><a href="#query">查询快递</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>
  <button class="collapse-btn"><span>&lt;</span></button>
</nav>

CSS 代码：

.side-nav {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background-color: #f2f2f2;
  border-radius: 10px;
  padding: 10px;
  transition: width 0.3s ease-in-out;
  overflow: hidden;
}

.side-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.side-nav li {
  display: table-row;
  margin-bottom: 10px;
}

.side-nav a {
  display: table-cell;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}

.side-nav a:hover {
  background-color: #333;
  color: #fff;
}

.collapse-btn {
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: #f2f2f2;
  cursor: pointer;
  transition: right 0.3s ease-in-out;
  z-index: 1;
}

.collapse-btn span {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  line-height: 30px;
}

.collapse-btn.collapsed {
  right: -50px;
}

.side-nav.collapsed {
  width: 50px;
}

@media screen and (max-width: 768px) {
  .side-nav {
    width: 50px;
  }
  
  .side-nav.collapsed {
    width: 0;
  }
  
  .collapse-btn {
    right: -40px;
  }
  
  .collapse-btn.collapsed {
    right: 0;
  }
  
  .side-nav li {
    display: block;
    margin-bottom: 0;
  }
  
  .side-nav a {
    display: block;
    text-align: center;
    padding: 10px 0;
  }
}

JavaScript 代码：

const collapseBtn = document.querySelector('.collapse-btn');
const sideNav = document.querySelector('.side-nav');

collapseBtn.addEventListener('click', function() {
  sideNav.classList.toggle('collapsed');
  this.classList.toggle('collapsed');
});

上述代码使用了绝对定位的方式，添加了一个收起按钮，并在导航栏上方。当用户点击该按钮时，导航栏宽度会发生变化，并使用 CSS 过渡效果实现动画。同时，JavaScript 代码监听了按钮的点击事件，当用户点击按钮时，会给导航栏和按钮添加 `collapsed` 类名，以便触发相应的 CSS 样式。在移动设备上，导航栏会默认以收起状态呈现，在点击按钮后才会展开。