장고:네비게이션 바 만들기 편집하기

{{장고}}

==개요==
전체 페이지에서 보여지는 메뉴바가 필요할 때가 있다.(혹은 섹션별로)

가장 기본이 되는 html파일이나 섹션의 html 파일에 작성한다.<br />

==방법==
부트스트랩을 이용하면 간단하게 작성이 가능하다.

body 상단에 들어가게끔 넣어준다.<syntaxhighlight lang="html">
<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>
</syntaxhighlight>각각의 요소는 html코드로 꾸며주면 된다.

===자바스크립트 파일===
부트스트랩에선 화면이 작아지면 자동으로 구성요소들을 없애고 메뉴버튼을 만든다. 그런데, 이 메뉴버튼이 작동하려면 자바스크립트 파일이 필요해.

<br />

==이외 팁==
{| class="wikitable"
!의도
!설명
!방법
|-
|네비게이션 바를 상단 고정
|nav 태그의 클래스 안에 fixed-top을 넣는다.
본문의 상단 일부가 바에 가려져 보이지 않는다.
|<nav class="... fixed-top">
|-
|처음엔 상단고정이 아니었다가 스크롤을 내리면 상단고정
|네비게이션 바를 본문 안에 넣으면 중간부터 네비게이션 바가 된다.
|<nav class="... sticky-top">
|}