Files

T

Antigravity Agent 1cfd3bbb56 docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고,
Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.

2026-07-05 00:10:59 +09:00

4.1 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

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):

#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).

4.1 KiB Raw Blame History