css 수직 탐색 막대 예제

수직 탐색 막대 예제

배경색이 회색 인 기본 세로 탐색 막대를 만들고 사용자가 마우스를 움직일 때 링크의 배경색을 변경합니다.

• 집
• 뉴스
• 접촉
• 약

예

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: #4CAF50;
    color: white;
}