하단 네비게이션 생성 방법
- 이전 페이지 수직 메뉴
- 다음 페이지 반응형 하단 네비게이션
CSS를 사용하여 하단 네비게이션 메뉴를 생성하는 방법을 배우세요.
하단 네비게이션 메뉴 생성
第一步 - HTML 추가:
<div class="navbar"> <a href="#home" class="active">홈</a> <a href="#news">뉴스</a> <a href="#contact">연락처</a> </div>
第二步 - CSS 추가:
/* 네비게이션 패널을 페이지 하단에 배치하고 고정 */ .navbar { background-color: #333; overflow: hidden; position: fixed; bottom: 0; width: 100%; } /* 네비게이션 패널에 링크 스타일 설정 */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* 마우스 오버 시 링크의 색상 변경 */ .navbar a:hover { background-color: #ddd; color: black; } /* 활성/현재 링크에 색상 추가 */ .navbar a.active { background-color: #04AA6D; color: white; }
관련 페이지
강의:CSS 네비게이션 바
- 이전 페이지 수직 메뉴
- 다음 페이지 반응형 하단 네비게이션