[베이직 포트폴리오] 반짝 반짝 토글 버튼

마우스를 올리거나 클릭 시 색상이 3가지로 변경되는 효과

클릭한 메뉴 버튼은 색상변경 효과가 유지된 상태이다

 

js 안 쓰려했는데 <details>  , <summary>  태그로는 원하는 대로 토글을 만들 수 없을 거 같아 js를 적용했다

이쁘니까 괜찮아..

 

@keyframes ToggleBlinky으로 색상을 지정해 주고 클릭한 li에 active 클래스명을 추가하면 끝

    <nav class="toggleBtn-container">
      <ul>
        <li class="toggleBtn" data-target="aboutSection">About</li>
        <li class="toggleBtn" data-target="skillSection">Skill</li>
        <li class="toggleBtn" data-target="projectsSection">Projects</li>
        <li class="toggleBtn" data-target="activitiesSection">Activities</li>
      </ul>
    </nav>

.toggleBtn-container {
  margin: 15vh 0 10vh 0;
  font-size: 2vw;

  ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
  }
  li:hover {
    cursor: pointer;
    animation: ToggleBlinky 1s linear infinite;
  }
  li.active {
    animation: ToggleBlinky 1s linear infinite;
  }
}

@keyframes ToggleBlinky {
  0% {
    color: blue;
  }
  50% {
    color: red;
  }
  100% {
    color: green;
  }
}

.section-content {
  display: none;
}
.section-content.active {
  display: flex;
  justify-content: center;
  width: 100%;
}

const toggleBtns = document.querySelectorAll(".toggleBtn");

toggleBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    const targetId = btn.getAttribute("data-target");
    const targetSection = document.getElementById(targetId);

    // 클릭한 버튼의 상태 확인
    const isActive = btn.classList.contains("active");

    // 모든 버튼에서 active 클래스 제거
    toggleBtns.forEach((button) => {
      button.classList.remove("active");
    });

    // 모든 섹션을 숨김
    document.querySelectorAll(".section-content").forEach((section) => {
      section.classList.remove("active");
    });

    if (!isActive) {
      // 클릭한 버튼이 비활성 상태일 때만 active 클래스 추가
      btn.classList.add("active");

      // 클릭한 버튼의 타겟 섹션만 보이게 함
      if (targetSection) {
        targetSection.classList.add("active");
      }
    }
  });
});