CSS로 아이콘 사이드 내비게이션 메뉴 만들기
사이드 내비게이션 메뉴는 웹사이트의 주요 메뉴를 화면 왼쪽이나 오른쪽에 세로로 고정 배치하는 UI 요소입니다. Font Awesome과 같은 아이콘 라이브러리를 CSS와 함께 활용하면 각 메뉴 항목에 직관적인 아이콘을 손쉽게 추가할 수 있어 사용자 경험이 크게 향상됩니다.
다음은 CSS를 사용하여 아이콘이 포함된 사이드 내비게이션 메뉴를 만드는 전체 코드입니다.
예제
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/fontawesome.min.css"/>
<style>
body {
margin: 0px;
margin-top: 10px;
padding: 0px;
}
nav {
height: 100vh;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(39, 39, 39);
overflow: auto;
height: 100%;
}
.links {
display: 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);
}
input[type="text"] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 8px;
font-size: 17px;
}
.selected {
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#">
<i class="fa fa-fw fa-home"></i> Home
</a>
<a class="links" href="#"> <i class="fa fa-fw fa-user"></i> Login </a>
<a class="links" href="#">
<i class="fa fa-user-circle-o" aria-hidden="true"></i> Register
</a>
<a class="links" href="#">
<i class="fa fa-fw fa-envelope"></i> Contact Us
</a>
<a class="links" href="#">
<i class="fa fa-info-circle" aria-hidden="true"></i> More Info
</a>
</nav>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
코드 설명
- nav 스타일:
position: fixed와left: 0,top: 0속성으로 메뉴를 화면 왼쪽에 고정하고,height: 100%로 화면 전체 높이를 차지하도록 설정했습니다.z-index: 1은 다른 콘텐츠 위에 메뉴가 표시되도록 합니다. - .links 클래스:
display: block으로 각 링크가 한 줄을 모두 차지하게 하여 세로로 쌓이도록 했으며,padding과text-align: center로 클릭 영역을 넓히고 텍스트를 가운데 정렬했습니다. - 호버 효과:
:hover선택자를 사용해 마우스를 올렸을 때 배경색이 변경되어 시각적인 피드백을 제공합니다. - .selected 클래스: 현재 방문 중인 페이지를 나타내기 위해 선택된 메뉴 항목에 다른 배경색을 적용했습니다.
- 아이콘 추가: Font Awesome의
<i>태그와 클래스(fa-home,fa-user등)를 사용해 각 메뉴 항목 앞에 아이콘을 배치했습니다.
이처럼 몇 줄의 CSS만으로도 깔끔하고 직관적인 사이드 내비게이션 메뉴를 구현할 수 있습니다. 필요에 따라 색상, 폭, 아이콘 등을 자유롭게 수정하여 자신만의 스타일로 커스터마이징해 보세요.