navbar 메뉴 선택 시 에러 해결

menu에서 해당 메뉴 클릭 시 처리

nav 태그를 사용해서 ul태그 밑에 li들을 만들어서 메뉴를 구현하려고 코드를 작성하였다.
css에서 해당 li태그에 마우스를 올렸을 때 동작을 어떻게 구현할 까 생각했다.

• 사용자에게 클릭이 가능하다는 것을 알려주기 위해 cursor: pointer 를 주었다.
• hover가 일어났을 때 border와 border-radius를 줘서 시각적으로 표현하려고 했는데 해당 li태그에 마우스를 올리면 부모 태그의 div 영역이 미세하게 커졌다 줄었다하는 오류가 발생했다.

그림상으로는 확인이 불가능하지만.. 메뉴들을 선택 할 때 마다 미세하게 영역이 늘었다 줄었다를 반복하고 있었다.

기존 코드

<ul class="menu">
  <li class="menu__item">Home</li>
...
</ul>

.menu {
  padding: 8px 12px;
  margin: 0 4px;
}

.menu:hover {
  cursor: pointer;
  border: 1px solid var(--color-light-white);
  border-radius: 5px;
}

메뉴 선택 시 에러 해결 과정

우선은 html코드에서 맨 첫 번째 li에 active라는 클래스를 하나 추가 했다.
그리고, 기존에 마우스가 올라간 li태그에 hover일 경우 커서 모양과 border를 적용했었는데 변경 한 코드는 li태그들에 padding, margin, cursor, border-radius를 주었다.

그리고 active 클래스를 추가한 li태그에는 border를 주었고, 선택된 li태그에는 hover일 때 background-color를 지정해서 선택된 메뉴가 무엇인 지 알 수 있도록 변경하였다.

---

변경 후 코드

.menu__item {
  padding: 8px 12px;
  margin: 0 4px;
  cursor: pointer;
  border-radius: var(--size-border-radius);
}

.menu__item.active {
  border: 1px solid var(--color-light-white);
}

.menu__item:hover {
  background-color: var(--color-dark-pink);
}