호버 가능한: 사이드 네비게이션 버튼 생성

호버 가능한 사이드 네비게이션 생성 방법

第一步 - HTML 추가:

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

第二步 - CSS 추가:

/* 사이드 네비게이션 내 링크 스타일 설정 */
#mySidenav a {
  position: absolute; /* 브라우저 창에 상대적으로 위치시키기 */
  left: -80px; /* 화면 밖에 위치시키기 */
  transition: 0.3s; /* 마우스 오버 시의 전환 효과 추가 */
  padding: 15px; /* 15px 내간격 */
  width: 100px; /* 구체적인 너비 설정 */
  text-decoration: none; /* 하이라이팅을 제거 */
  font-size: 20px; /* 글자 크기를 늘리기 */
  color: white; /* 글자 색상을 흰색으로 설정 */
  border-radius: 0 5px 5px 0; /* 오른쪽 상단과 오른쪽 하단이 둥근 모서리 */
}
#mySidenav a:hover {
  left: 0; /* 마우스 오버 시, 요소가 예상대로 표시되도록 */
}
/* about 링크: 상단 간격 20px, 녹색 배경 */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* 파란색 */
}
#projects {
  top: 140px;
  background-color: #f44336; /* 빨간색 */
}
#contact {
  top: 200px;
  background-color: #555 /* 채색은 검은색 */
}

직접 시도해보세요

관련 페이지

강의:CSS 네비게이션 패널