js实现圆形导航

<div class="circle-nav">
  <a href="#" class="nav-item" data-target="home">Home</a>
  <a href="#" class="nav-item" data-target="about">About</a>
  <a href="#" class="nav-item" data-target="services">Services</a>
  <a href="#" class="nav-item" data-target="contact">Contact</a>
</div>

.circle-nav {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}

.nav-item {
  position: absolute;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav-item:hover {
  background-color: #2980b9;
}

/* Positioning of nav items */
.circle-nav .nav-item:nth-child(1) { top: 0; left: 80px; }
.circle-nav .nav-item:nth-child(2) { top: 80px; left: 0; }
.circle-nav .nav-item:nth-child(3) { bottom: 80px; left: 0; }
.circle-nav .nav-item:nth-child(4) { bottom: 0; right: 80px; }

document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', function(e) {
    e.preventDefault();
    const target = this.getAttribute('data-target');
    alert(`Navigating to ${target}`);
    // Here you can add code to navigate to different sections of your page
  });
});

@media (max-width: 600px) {
  .circle-nav {
    width: 150px;
    height: 150px;
  }
  .nav-item {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
}

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
<script>
  document.querySelectorAll('.nav-item').forEach(item => {
    const hammer = new Hammer(item);
    hammer.on('swipe', function(event) {
      // Handle swipe events
    });
  });
</script>