어떻게 만들지: 가로 메뉴

가로 버튼 그룹을 어떻게 만드는가

第一步 - HTML 추가:

<div class="vertical-menu">
  <a href="#" class="active">홈</a>
  <a href="#">링크 1</a>
  <a href="#">링크 2</a>
  <a href="#">링크 3</a>
  <a href="#">링크 4</a>
</div>

第二步 - CSS 추가:

.vertical-menu {
  width: 200px; /* 원하시면 너비 설정 */
}
.vertical-menu a {
  background-color: #eee; /* 회색 배경 색상 */
  color: black; /* 검은 글자 색상 */
  display: block; /* 링크를 하나씩 표시 */
  padding: 12px; /* 일부 내간격 추가 */
  text-decoration: none; /* 링크의 하늘채的下划线 제거 */
}
.vertical-menu a:hover {
  background-color: #ccc; /* 마우스 오버 시의 짙은 회색 배경 */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* 활성/현재 링크에绿色发展 */
  color: white;
}

亲自试一试

가로 스크롤 메뉴

가로 스크롤 메뉴를 원하시면, 특정 높이를 설정하고 추가하세요 overflow 속성:

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

亲自试一试

相关页面

教程：如何创建侧边导航栏