CSS 수직 탐색 모음
수직 탐색 모음
수직 탐색 모음을 작성하려면 이전 페이지의 코드 외에도 목록 내부의 <a> 요소에 스타일을 지정할 수 있습니다.
예시
li a
{
display: block;
width: 60px;
}
설명된 예:
display: block;- 링크를 블록 요소로 표시하면 전체 링크 영역(텍스트뿐만 아니라)을 클릭할 수 있으며 너비(원하는 경우 패딩, 여백, 높이 등)를 지정할 수 있습니다.width: 60px;- 블록 요소는 기본적으로 사용 가능한 전체 너비를 차지합니다. 60픽셀 너비를 지정하고 싶습니다.
<ul>의 너비를 설정하고 <a>의 너비를 제거할 수도 있습니다. 이는 블록 요소로 표시될 때 사용 가능한 전체 너비를 차지하기 때문입니다. 이것은 이전 예와 동일한 결과를 생성합니다:
예시
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
수직 탐색 모음의 예
회색 배경색으로 기본 수직 탐색 모음을 만들고 사용자가 링크 위로 마우스를 이동할 때 링크의 배경색을 변경합니다.
예시
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
활성/현재 탐색 링크
현재 링크에 "활성" 클래스를 추가하여 사용자에게 현재 있는 페이지를 알립니다.
예시
.active {
background-color: #04AA6D;
color: white;
}
센터 링크 및 테두리 추가
<li> 또는 <a>에 추가 text-align:center하여 링크를 중앙에 배치합니다.
<ul>에 속성을 추가 border하여 탐색 모음 주위에 테두리를 추가합니다. navbar 내부에 테두리를 추가 border-bottom하려면 마지막 요소를 제외한 모든 <li> 요소에 a를 추가하십시오.
예시
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
전체 높이 고정 수직 Navbar
전체 높이의 "고정" 측면 탐색 만들기:
예시
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
참고: 이 예는 모바일 장치에서 제대로 작동하지 않을 수 있습니다.