1 개요[ | ]
- CSS Navigation Bar, pure CSS navigation bar implementation
- CSS 내비게이션 바
- 순수 CSS로 구현한 내비게이션바
html
Copy
<style>
body { margin: 0; }
.navbar>ul {
background: hotpink;
margin: 0;
padding: 0;
list-style: none;
}
.navbar>ul>li {
display: inline-block;
padding: 0;
}
.navbar>ul>li>a {
display: block;
text-decoration: none;
padding: 10px 20px;
color: white;
}
.navbar>ul>li>a:hover { background: deeppink; }
</style>
<nav class="navbar">
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">1번 메뉴</a></li>
<li><a href="#">2번 메뉴</a></li>
<li><a href="#">3번 메뉴</a></li>
</ul>
</nav>
2 같이 보기[ | ]
- CSS 내비게이션바 양쪽 정렬
- CSS 내비게이션바 상단 고정
- CSS 드롭다운 내비게이션바
- CSS 내비게이션바 버튼 레이블 숨기기
- jQuery 내비게이션바 + 드롭다운
- 부트스트랩 내비게이션바
- 부트스트랩 .list-inline
- 내비게이션바