내비게이션 영역 결과물
PC 화면
모바일 화면
리스트 클릭 시
index.html
<body data-bs-spy="scroll" data-bs-target="#navbar-example">
<!-- 네비게이션 영역 -->
<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark" id="navbar-example">
<div class="container">
<a class="navbar-brand" href="#" style="font-family: Gugi;">
<img src="images/logo.png" class="img-fluid"> 이젠 Cook
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-pills ms-auto my-2">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">홈</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-chef">쉐프 소개</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">포트폴리오</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">서비스</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blog">블로그</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">연락처</a>
</li>
</ul>
</div>
</div>
</nav>
<nav>
- fixed-top : 상단에 내비게이션 바 고정 (스크롤 시에도 상단 고정)
- navbar-dark : 부트스트랩 내비게이션 바 기본 테마 사용
부트스트랩 내비게이션 바 예제 사용
https://getbootstrap.com/docs/5.3/components/navbar/?#scrolling
Navbar
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
getbootstrap.com
<scroll spy>
스크롤 시 해당 영역의 메뉴를 active 상태가 되도록 만들어 주는 효과
- nav 태그에 id 값 부여
- body 태그에 data-bs-spy="scroll", data-bs-target="#navbar-id" 속성 부여
부트스트랩 스크롤스파이 예제 사용
https://getbootstrap.com/docs/5.3/components/scrollspy/#scrollspyHeading2
Scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
getbootstrap.com
style.css
/* 네비게이션 영역 */
.nav-link:hover {
color: #ffc107;
}
.navbar .nav-link.active {
background-color: transparent;
font-weight: bold;
color: #ffc107;
}
navbar에 부여된 기본 스타일을 변경하기 위해 css 스타일을 변경해 주었음
'Web > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 웹사이트 만들기 - 뉴스 섹션 (3) | 2024.10.29 |
|---|---|
| [Bootstrap] 웹사이트 만들기 - 블로그 섹션 (3) | 2024.10.29 |
| [Bootstrap] 웹사이트 만들기 - 서비스 섹션 (1) | 2024.10.25 |
| [Bootstrap] 웹사이트 만들기 - 연락처 섹션 (0) | 2024.10.25 |
| [Bootstrap] 웹사이트 만들기 - SNS 섹션 (3) | 2024.10.25 |