w3.css

수직 메뉴

CSS를 사용하여 세로 메뉴를 만드는 방법을 알아보자.

수직 버튼 그룹을 만드는 방법

1단계) HTML 추가

<div class="vertical-menu">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</div>

2단계) CSS 추가

.vertical-menu {
  width: 200px; /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #04AA6D; /* Add a green color to the "active/current" link */
  color: white;
}

수직 스크롤 메뉴

수직 스크롤 메뉴를 원하는 경우 특정 height를 설정하고 overflow 속성 추가 한다.

예제

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

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기