CSS만 사용하면 마우스 커서를 올렸을 때 화면 가장자리에서 슬라이드되어 나타나는 호버형 사이드 내비게이션(Hoverable Sidenav)을 손쉽게 구현할 수 있습니다. 핵심 원리는 각 내비게이션 링크를 position: fixed로 고정한 뒤 left 값을 음수로 지정해 화면 밖으로 숨겨두고, :hover 선택자를 통해 left: 0으로 이동시키는 것입니다. 여기에 transition 속성을 더하면 부드러운 애니메이션 효과까지 얻을 수 있습니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>호버형 사이드 내비게이션</title>
<style>
nav a {
position: fixed;
left: -120px;
transition: 0.3s;
padding: 10px;
width: 140px;
text-decoration: none;
font-size: 20px;
color: black;
font-weight: bolder;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav a:hover {
left: 0;
}
#Info {
top: 20px;
background-color: #6de2f7;
}
#Social {
top: 80px;
background-color: #71fc71;
}
#Address {
top: 140px;
background-color: #c4f553;
}
#Home {
top: 200px;
background-color: rgb(225, 115, 240);
}
</style>
</head>
<body>
<nav>
<a href="#" id="Home">홈</a>
<a href="#" id="Address">주소</a>
<a href="#" id="Social">소셜 링크</a>
<a href="#" id="Info">더 많은 정보</a>
</nav>
</body>
</html>
코드 설명
left: -120px: 평소에는 각 링크가 화면 왼쪽 바깥에 위치해 사용자에게 보이지 않습니다.transition: 0.3s: 위치가 변할 때 0.3초 동안 부드럽게 움직이는 애니메이션 효과를 적용합니다.nav a:hover { left: 0; }: 링크에 마우스를 올리면 요소가 화면 안으로 들어오면서 메뉴가 나타납니다.- ID 선택자(
#Home,#Info등) : 각 메뉴의 세로 위치(top)와 배경색을 개별적으로 지정해 메뉴를 세로로 배치하고 색상으로 구분합니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
각 버튼 위에 마우스를 올리면 해당 메뉴가 아래와 같이 화면 안으로 확장되어 나타납니다.
