장고:네비게이션 바 만들기
장고! 웹 프레임워크! 틀:장고
개요[편집 | 원본 편집]
전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로)
가장 기본이 되는 html파일이나 섹션의 html 파일에 작성한다.
방법[편집 | 원본 편집]
부트스트랩을 이용하면 간단하게 작성이 가능하다.
body 상단에 들어가게끔 넣어준다.
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<!------------------------------ 로고-------------------------------------------->
<a class="navbar-brand" href="{% url '앱이름:home' %}">나타낼택스트</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarNav">
<ul class="navbar-nav">
<!------------------------------ 각종 메뉴-------------------------------------------->
<li class="nav-item ">
<a class="nav-link" href="알아서 주소링크">나타낼택스트</a></li>
</ul>
</div>
</nav>
각각의 요소는 html코드로 꾸며주면 된다.
자바스크립트 파일[편집 | 원본 편집]
부트스트랩에선 화면이 작아지면 자동으로 구성요소들을 없애고 메뉴버튼을 만든다. 그런데, 이 메뉴버튼이 작동하려면 자바스크립트 파일이 필요해.
이외 팁[편집 | 원본 편집]
| 의도 | 설명 | 방법 |
|---|---|---|
| 네비게이션 바를 상단 고정 | nav 태그의 클래스 안에 fixed-top을 넣는다.
본문의 상단 일부가 바에 가려져 보이지 않는다. |
<nav class="... fixed-top"> |
| 처음엔 상단고정이 아니었다가 스크롤을 내리면 상단고정 | 네비게이션 바를 본문 안에 넣으면 중간부터 네비게이션 바가 된다. | <nav class="... sticky-top"> |