HTML

<div class="nav-container">

  <div class="nav-section">
    <h3>Compétences</h3>

    <div class="chips">
      <button class="chip active" data-target="sys">Sys & Réseaux</button>
      <button class="chip" data-target="cloud">Cloud</button>
      <button class="chip" data-target="script">Scripting</button>
    </div>

    <div class="content-wrapper">
      <div class="content-box active" id="sys">
        <ul>
          <li>🖥️ Administration réseaux</li>
          <li>🛡️ Sécurité réseau</li>
          <li>📦 VMware</li>
        </ul>
      </div>

      <div class="content-box" id="cloud">
        <ul>
          <li>AWS / Azure</li>
          <li>CI/CD</li>
        </ul>
      </div>

      <div class="content-box" id="script">
        <ul>
          <li>Bash</li>
          <li>Python</li>
        </ul>
      </div>
    </div>
  </div>

</div>


CSS

body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #e2e8f0;
}

/* Container */
.nav-container {
  width: 340px;
  padding: 20px;
}

/* Section */
.nav-section h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* Chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  border: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: #cbd5f5;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
}

/* Glow effect */
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

.chip:hover::before {
  opacity: 1;
}

/* Hover */
.chip:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.1);
}

/* Active */
.chip.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: white;
  box-shadow: 0 5px 20px rgba(59,130,246,0.4);
}

/* Content wrapper animation */
.content-wrapper {
  position: relative;
  margin-top: 15px;
}

/* Content box */
.content-box {
  position: absolute;
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);

  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;

  transition: all 0.35s cubic-bezier(.4,0,.2,1);
}

.content-box.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}

/* List style */
.content-box ul {
  padding-left: 0;
  list-style: none;
}

.content-box li {
  margin-bottom: 8px;
  padding-left: 10px;
  position: relative;
}

.content-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background: #60a5fa;
  border-radius: 50%;
}

JS

<script>
document.querySelectorAll('.chip[data-target]').forEach(button => {
  button.addEventListener('click', () => {

    const parent = button.closest('.nav-section');

    // Active chip
    parent.querySelectorAll('.chip').forEach(c => c.classList.remove('active'));
    button.classList.add('active');

    // Switch content avec animation propre
    const target = button.dataset.target;

    parent.querySelectorAll('.content-box').forEach(box => {
      box.classList.remove('active');
    });

    const activeBox = parent.querySelector('#' + target);
    activeBox.classList.add('active');

    // Bonus: mémorisation
    localStorage.setItem('nav-active', target);
  });
});

// Restore last state
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('nav-active');
  if(saved) {
    const btn = document.querySelector(`[data-target="${saved}"]`);
    if(btn) btn.click();
  }
});
</script>