메뉴 항목이 많은 웹사이트에서는 화면 너비가 좁아질 경우 모든 메뉴를 한 줄에 표시하기 어렵습니다. 이럴 때 CSS만으로 손쉽게 가로 스크롤이 가능한 메뉴를 구현할 수 있습니다. 핵심 원리는 white-space: nowrap으로 메뉴 항목의 줄바꿈을 막고, overflow: auto로 필요할 때 스크롤이 나타나도록 설정하는 것입니다.
전체 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin:0px;
margin-top:10px;
padding: 0px;
}
nav{
width: 100%;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
white-space: nowrap;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#"> Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Our Social Links</a>
<a class="links" href="#">Visit Us</a>
</nav>
</body>
</html>
핵심 CSS 속성 살펴보기
- white-space: nowrap : 화면이 좁아져도 메뉴 링크가 줄바꿈되지 않고 한 줄로 유지됩니다.
- overflow: auto : 콘텐츠가 nav 영역보다 넓어지면 자동으로 가로 스크롤바가 생성됩니다.
- display: inline-block : 링크 요소들을 가로 방향으로 나란히 배치합니다.
- .links:hover : 마우스를 올렸을 때 배경색이 변하는 호버 효과를 적용해 사용자 경험을 높입니다.
- .selected : 현재 선택된(활성화된) 메뉴 항목을 배경색으로 강조하는 클래스입니다.
실행 결과
위 코드를 실행하면 다음과 같은 가로 메뉴 바가 출력됩니다.
브라우저 창의 너비를 줄이면 아래 그림처럼 가로 스크롤이 활성화되어, 화면에 보이지 않던 메뉴 항목까지 스크롤하여 확인할 수 있습니다.
