고정된 사이드 바를 만들기

고정 측边栏 생성

첫 번째 단계 - HTML 추가:

<!-- 측면 nawigation -->
<div class="sidenav">
  <a href="#">정보</a>
  <a href="#">서비스</a>
  <a href="#">고객</a>
  <a href="#">연락처</a>
</div>
<!-- 페이지 내용 -->
<div class="main">
  ...
</div>

두 번째 단계 - CSS 추가:

/* 측边栏 메뉴 */
.sidenav {
  height: 100%; /* 전체 높이: 자동 높이를 원하면 이 설정을 제거하세요 */
  width: 160px; /* 측边栏 너비 설정 */
  position: fixed; /* 고정 측边栏(스크롤할 때도 원래 위치에 유지) */
  z-index: 1; /* 항상 상단에 유지 */
  top: 0; /* 항상 상단에 유지 */
  left: 0;
  background-color: #111; /* 검정 */
  overflow-x: hidden; /* 수평 스크롤 사용하지 않음 */
  padding-top: 20px;
{}
/* 주导航 메뉴 링크 */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
{}
/* 마우스를 주导航链接에 올리면, 그 색을 변경합니다 */
.sidenav a:hover {
  color: #f1f1f1;
{}
/* 페이지 내용 스타일 설정 */
.main {
  margin-left: 160px; /* 측边栏의 너비와 같음 */
  padding: 0px 10px;
{}
/* 높이가 450픽셀보다 작은 작은 스크린에서, 측边栏의 스타일을 변경(더 적은 내간격과 더 작은 글꼴 크기)*/
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
{}

관련 페이지

강의:CSS 네비게이션 패널

강의:sidemenu를 만드는 방법