1 개요[ | ]
- CSS 내비게이션바 버튼 텍스트 자동 숨김
- CSS 내비게이션바 버튼 레이블 자동접기
- CSS 내비게이션바 아이콘 남기고 버튼 레이블 숨기기
- CSS 내비게이션바를 기초로 작성
- 아이콘은 폰트어썸 활용
- 화면너비가 600px 이하일 때 버튼 레이블 숨기고, 아이콘 크기 약간 키움
- ( CSS @media 쿼리 활용 )
html
Copy
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<style>
body { margin: 0; }
.navbar {
background: hotpink;
padding: 0; margin: 0;
list-style: none;
}
.navbar>li {
display: inline-block;
}
.navbar>li>a {
display: block;
text-decoration: none;
padding: 10px 20px;
color: white;
}
.navbar>li>a:hover {
background: deeppink;
}
@media (max-width: 700px) {
.navbar .icon {
font-size: 21px;
}
.navbar .text {
display: none;
}
}
</style>
<ul class="navbar">
<li><a href="#">
<i class="icon fa fa-home"></i>
<span class='text'>홈</span>
</a></li>
<li><a href="#">
<i class="icon fa fa-calendar"></i>
<span class='text'>달력</span>
</a></li>
<li><a href="#">
<i class="icon fa fa-bar-chart"></i>
<span class='text'>통계</span>
</a></li>
<li><a href="#">
<i class="icon fa fa-cog"></i>
<span class='text'>설정</span>
</a></li>
<li><a href="#">
<i class="icon fa fa-user"></i>
<span class='text'>로그인</span>
</a></li>
</ul>
- → 너비 700px 이하에서 버튼 레이블(홈, 달력, 통계...)이 사라짐
2 같이 보기[ | ]
편집자 Jmnote
로그인하시면 댓글을 쓸 수 있습니다.
미디어위키 MobileFrontend 설치 (모바일웹) ― …미디어위키 MobileFrontend 설치 (모바일웹) ― Jmnote미디어위키 MobileFrontend 설치 (모바일웹) ― Asg88미디어위키 MobileFrontend 설치 (모바일웹) ― Jmnote미디어위키 MobileFrontend 설치 (모바일웹) ― Asg88미디어위키 MobileFrontend 설치 (모바일웹) ― Jmnote미디어위키 모바일웹 적용 (WPTouch) ― …미디어위키 모바일웹 적용 (WPTouch) ― Jmnote