앞의 글들을 통해서, Firebase의 Database를 활용하기 위하여 데이터를 쓰고, 읽고, 수정하는 등의 기능을 수행하는 여러 페이지와 게시판 운영을 위한 페이지, 그리고 누구나 접속 시 만나게 되는 Landing Page를 만드는 과정을 소개했다.
구슬이 서 말이라도, 꿰어야 보배라는 말이 있듯이, 이러한 각각의 웹페이지들을 하나의 시스템처럼 연결해 주려면 이들 페이지 간 이동을 선택할 수 있는 메뉴바 구성이 필요한데, 메뉴바는 앞서 소개한 부트스트랩의 Navbar라는 요소를 이용하면, 아주 간단하게 웹페이지에 다양한 형식의 메뉴바를 만들 수가 있다.
형태도 다음과 같이 몇 가지 변형된 형태들을 소개하고 있어 자신이 선호하는 형태를 선택해서 사용하면 되는데,
사용방법도 쉬워서, 자신이 원하는 형태의 메뉴바를 선택해 다음과 같이 해당 Navbar의 HTML 코드를 복사해 자신의 웹페이지에 붙여넣기 해주고, 각 메뉴 버튼에 표시될 이름을 바꾸어주고, 각 메뉴가 선택되었을 때 이동할 페이지 이름을 아래 코드의 “#” 부분에 기재해 주기만 하면 된다.
만일 추가적인 메뉴 버튼이 필요하다면, 위 코드에서 각각의 메뉴 버튼에 해당되는 다음 부분에
다음과 같이 원하는 위치에 추가 버튼을 위한 코드를 추가해 주면 된다.
만일 다음 화면에서처럼 Pull-Down 방식의 메뉴 버튼을 추가하려면
부트스트랩의 Pull-Down형 Navbar에 소개된 예제 코드 중 Pull-Down 메뉴에 해당되는 다음 부분을
자신이 선택한 Navbar 코드 중간에 다음과 같이 추가해 주면 된다.
<!-- Navigation-->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">추가메뉴1</a>
<a class="nav-link" href="#">추가메뉴2</a>
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</div>
</div>
</div>
</nav>
이제 이 Navbar 코드를 기존에 미리 만들어둔 Landing 페이지에 추가하면 다음과 같이 표시된다.
이제 이 메뉴 부분의 표시를 내가 원하는 대로 변경하고
각 메뉴 버튼 선택 시 이동할 페이지를 지정해 주었다.
그리고 메뉴 중 Log-in 부분과 신규 가입은 모양을 특화 시키기 위해, 다음과 같이 메뉴바에서 여백을 띄어 화면 오른쪽 끝부분에 비슷한 사이즈의 버튼들을 만들어 배치했는데,
이 버튼에 연결할 페이지들을 각각 지정해 주었다.
이렇게 완료된 메뉴 구현을 위한 Navbar 소스는 다음과 같다.
만일 메뉴 중 비활성화가 필요한 경우는 disabled 속성을 이용하고, 현재 화면에 해당되는 메뉴에 굵은 글자를 적용하려면 active 속성을 적용해 주면 된다. 만일 메뉴바가 화면 윗부분에 항상 고정되어 표시되어야 한다면, Navbar 첫 문장에서 fixed-top 속성을 추가해주고, 화면 바닥쪽에 고정하려면 fixed-bottom 속성을 적용해 주면 된다.
<!-- Navigation--> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="index.html">콩이네 야채</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="index.html">Home</a> <a class="nav-link" href="readitinpages.html">상품현황</a> <a class="nav-link" href="searchit.html">상품검색</a> <a class="nav-link" href="boardread.html">게시판</a> </div> </div> <ul class="navbar-nav"> <li class="nav-item"> <a class="btn btn-success" style="padding: 5px 10px;" href="logincheck.html">Log-In</a> </li> <li class="nav-item" style="height: 0; margin: 0 10px;"></li> <li class="nav-item"> <a class="btn btn-warning" style="padding: 5px 10px;" href="jointogroup.html">신규가입</a> </li> </ul> </div> </nav>
이제 이러한 Navbar를 미리 만들어둔 각각의 페이지마다 붙여넣기만 하고, 각 페이지별로 조정이 필요한 항목만 수정하는 방식으로 모든 페이지에 대해 메뉴바를 간단하게 구현해 줄 수 있다. Navbar는 메뉴 구현이 필요한 각각의 페이지마다 붙여넣어야 한다. 붙여넣는 위치는 사람마다 조금씩 다를수 있는데, 내 경우는 대체로 HTML <body> 시작 부분에 넣는 편이다.