아이콘을 포함한 가변 네비게이션 바를 어떻게 만드는가
- 이전 페이지 호버링 측 네비게이션 버튼
- 다음 페이지 수평 스크롤 메뉴
CSS를 사용하여 아이콘을 포함한 네비게이션 메뉴를 만들어 보세요.
아이콘을 포함한 가변 네비게이션 바를 어떻게 만드는가
단계 1 - HTML 추가:
<!-- 로드 아이콘 라이브러리 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- 측栏 --> <div class="sidebar"> <a href="#home"><i class="fa fa-fw fa-home"></i> Home</a> <a href="#services"><i class="fa fa-fw fa-wrench"></i> Services</a> <a href="#clients"><i class="fa fa-fw fa-user"></i> Clients</a> <a href="#contact"><i class="fa fa-fw fa-envelope"></i> Contact</a> </div>
第二步 - CSS 추가:
/* 측边栏 스타일 - 전체 높이 고정 */
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 16px;
}
/* 측边栏链接的样式 설정 */
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
}
/* 마우스 오버 시 링크 스타일 설정 */
.sidebar a:hover {
color: #f1f1f1;
}
/* 주요 내용의 스타일 */
.main {
margin-left: 160px; /* 측边导航栏的宽度相同 */
padding: 0px 10px;
}
/* 작은 스크린에 대한 미디어 쿼리 추가(스크린 높이가 450픽셀보다 작을 때, 작은 내간격과 폰트 크기를 추가) */
@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
관련 페이지
강의:CSS 네비게이션 패널
- 이전 페이지 호버링 측 네비게이션 버튼
- 다음 페이지 수평 스크롤 메뉴
