---
id: howto-css-sidenav-buttons
title: "How To - Side Navigation Buttons"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["hoverable sidenav tabs CSS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.82
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "buttons", "navigation", "transition"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Sidenav Buttons]]

## 🎯 한 줄 통찰 (One-line insight)
Each link starts positioned OFF-SCREEN (`left: -80px`, wider than the link's own visible width) rather than hidden via `display: none` or `opacity: 0` — this specific choice is what allows the `transition: 0.3s` combined with `:hover { left: 0; }` to produce a smooth SLIDE-IN motion (the browser animates the `left` property's numeric change) instead of an instant appear/disappear, which opacity or display toggles could never animate the same way. [S1]

## 🧠 핵심 개념 (Core concepts)
- **Off-screen starting position** — `left: -80px` (each tab's width is `100px`, so `-80px` leaves a 20px sliver visible as a "handle"). [S1]
- **`transition: 0.3s`** — animates the `left` property change smoothly, rather than snapping instantly. [S1]
- **`:hover { left: 0; }`** — slides the tab fully into view on hover. [S1]
- **Stacked `top` offsets + individual colors per tab** — each of the four tabs (`#about`, `#blog`, `#projects`, `#contact`) has its own `top` value (20px, 80px, 140px, 200px) and background color, positioning them as a vertically-stacked column of colored tabs. [S1]
- **`border-radius: 0 5px 5px 0`** — rounds only the RIGHT corners (top-right, bottom-right), since the left edge is meant to be flush against/hidden by the screen edge. [S1]

## 📖 세부 내용 (Details)
- `#mySidenav a { position: absolute; left: -80px; transition: 0.3s; width: 100px; border-radius: 0 5px 5px 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #04AA6D; }`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **display/opacity 토글이 아니라 위치 애니메이션으로 슬라이드 효과를 냄**: 다른 hover-reveal 레시피(예: `[[HOWTO CSS Button Split]]`)가 `display: none → block`으로 즉시 나타나는 방식이었다면, 이 레시피는 요소를 화면 밖(`left: -80px`)에 미리 배치해두고 `transition`으로 위치를 부드럽게 이동시킨다는 점이 확인됨 — display 토글은 애니메이션이 불가능하지만 위치(left) 값은 transition으로 애니메이션 가능하기 때문. [S1]

## 🛠️ 적용 사례 (Applied in summary)
About/Blog/Projects/Contact 4개의 색이 다른 탭이 화면 왼쪽에 살짝만 보이다가, 마우스를 올리면 부드럽게 미끄러져 나오는 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
Off-screen tabs that slide in smoothly via transition (CSS):
```css
#mySidenav a {
  position: absolute;
  left: -80px; /* off-screen, 20px sliver visible */
  transition: 0.3s;
  width: 100px;
  border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
  left: 0; /* slides fully into view */
}
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.82
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS Fixed Sidebar]], [[HOWTO JS Sidenav]], [[HOWTO CSS Transition Hover]]
- **참조 맥락:** CSS Buttons 섹션의 마지막 챕터 — CSS Navigation & Menus 섹션으로 이어짐.

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Side Navigation Buttons — https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Side Navigation Buttons" recipe (Astra wiki-curation, P-Reinforce v3.1 format).