http://maczniak.github.io/bootstrap/javascript.html
and
Collapse navigator
http://zetawiki.com/wiki/부트스트랩_내비게이션바_자동접기_navbar-collapse
개요[편집]
- Collapsing The Navigation Bar, navbar-collapse
- 부트스트랩 네비게이션바 자동접기
예시[편집]
- 화면너비가 넓으면 navbar-collapse이 표시되고, navbar-toggle은 숨겨짐
- 화면너비가 작으면 navbar-collapse은 숨겨지고, navbar-toggle은 표시됨
- 대신 버튼을 누르면 세로 드롭다운 형식으로 나타남
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">제타위키</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">홈</a></li>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">회원가입</a></li>
<li><a href="#">로그인</a></li>
</ul>
</div>
</div>
</nav>
