6-1. 내비게이션
■ 내비게이션 메뉴
간단한 수평 메뉴를 만들려면 <ul> 요소에 .nav를 추가한 다음, 각 <li> 요소에 클래스 .nav-item을 추가합니다.
그리고 <a> 요소에 클래스 .nav-link를 사용합니다.
<div class="container mt-3">
<h3>내비게이션</h3>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
</div>
ex6-1.html의 실행 결과
■ 수직 내비게이션 메뉴
수직 내비게이션 메뉴를 만들려면 클래스 .flex-column를 추가합니다.
<div class="container mt-3">
<h3>수직 내비게이션</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
</div>
ex6-2.html의 실행 결과
■ 탭 내비게이션 메뉴
클래스 .nav-tabs를 사용하여 탭 내비게이션 메뉴로 전환합니다. 클래스 .active는 현재 링크를 활성화시킵니다.
<div class="container mt-3">
<h3>탭 내비게이션</h3>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
</div>
ex6-3.html의 실행 결과
■ 버튼 내비게이션 메뉴
클래스 .nav-pills를 사용하여 버튼 내비게이션 메뉴로 전환합니다.
<div class="container mt-3">
<h3>버튼 내비게이션</h3>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
</div>
ex6-4.html의 실행 결과
■ 균등 탭/버튼 내비게이션
클래스 .nav-justified을 사용하면 탭과 버튼 내비게이션의 각 열의 너비를 동일하게 맞출 수 있습니다.
<div class="container mt-3">
<h3>균등 탭/버튼 내비게이션</h3>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
<ul class="nav nav-pills nav-justified mt-3">
<li class="nav-item">
<a class="nav-link active" href="#">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴2</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴3</a>
</li>
</ul>
</div>
ex6-5.html의 실행 결과
■ 드롭다운 버튼 내비게이션
다음은 버튼 내비게이션에 드롭다운 기능을 추가한 예입니다.
<div class="container mt-3">
<h3>드롭다운 버튼 내비게이션</h3>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">메뉴1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">메뉴2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브1</a></li>
<li><a class="dropdown-item" href="#">서브2</a></li>
<li><a class="dropdown-item" href="#">서브3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴3</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴4</a>
</li>
</ul>
</div>
ex6-6.html의 실행 결과
■ 드롭다운 탭 내비게이션
다음은 탭 내비게이션에 드롭다운 기능을 추가한 예입니다.
<div class="container mt-3">
<h3>드롭다운 버튼 내비게이션</h3>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">메뉴1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">메뉴2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">서브1</a></li>
<li><a class="dropdown-item" href="#">서브2</a></li>
<li><a class="dropdown-item" href="#">서브3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">메뉴3</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">메뉴4</a>
</li>
</ul>
</div>
ex6-7.html의 실행 결과
■ 토글 다이내믹 탭 내비게이션
탭을 토글 가능하게 만들려면 각 링크에 data-toggle="tab" 속성을 추가합니다. 그런 다음 각 탭에 고유한 ID가 있는 클래스에 .tab-pane를 추가하고
이를 <div> 요소 안에 클래스 .tab-content를 삽입합니다.
탭을 클릭할 때 탭이 점점 더 밝아지고 희미해지게 하려면 클래스 .fade와 .tab-pane를 추가합니다.
토글 다이내믹 탭 내비게이션
ex6-8.html
<div class="container mt-3">
<h3>토글 다이내믹 탭 내비게이션</h3>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">메뉴2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>메인 페이지로 돌아갑니다.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>메뉴1</h3>
<p>메뉴1입니다.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>메뉴2</h3>
<p>메뉴2입니다.</p>
</div>
</div>
</div>
ex6-8.html의 실행 결과
■ 토글 다이내믹 버튼 내비게이션
앞의 토글 다이내믹 탭 내비게이션에서 data-toggle="pill" 으로 하면 토글 다이내믹 내비게이션이 버튼 내비게이션 형태로 바뀝니다.
토글 다이내믹 버튼 내비게이션
ex6-9.html
<div class="container mt-3">
<h3>토글 다이내믹 버튼 내비게이션</h3>
<!-- Nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">메뉴1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">메뉴2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>메인 페이지로 돌아갑니다.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>메뉴1</h3>
<p>메뉴1입니다.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>메뉴2</h3>
<p>메뉴2입니다.</p>
</div>
</div>
</div>
ex6-9.html의 실행 결과
