[1.bulma]
bulma는 css로만 만들어진 css 프레임워크라서 자바스크립트를 따로 작성해야 합니다.
[2.navbar-burger 클래스]
반응형으로 웹사이트 제작할때 메뉴바를 다 보여줄수 없으니
navbar burger 클래스를 이용해서 반응형 크기에 맞게 메뉴를 변형합니다.
bulma 해당문서에 다음과 같이 적혀있습니다.
[navbar-burger 만들기]
static파일들을 불러오기 위해 html 최상단에 {% load static %}을 선언해줍니다.
*static파일 경로 설정을 안하셨다면 settings.py에 가서 설정하셔야 합니다.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<!--생략-->
<!-- START NAV -->
<nav class="navbar is-fixed-top is-link">
<div class="container">
<!-- navbar-brand start -->
<div class="navbar-brand">
<a class="navbar-item" href="">
###
</a>
<a class="navbar-burger" id='burger'>
<span></span>
<span></span>
<span></span>
</a>
</div>
<!-- navbar-brand end -->
<!-- navbar menu element-->
<div class="navbar-menu" id="nav-links">
<div class="navbar-end">
<a class="navbar-item" href={% url "main" %}>Home</a>
<a class="navbar-item" href={% url "about" %}>about</a>
<a class="navbar-item" href="#">product</a>
<a class="navbar-item" href="#">store</a>
<a class="navbar-item" href={% url "contact" %}>contact</a>
</div>
</div>
<!-- navbar menu element-->
</div>
</nav>
<!-- END NAV --> nav태그 밑에 a태그로 burger라는 아이디로 만들어줍니다.
그리고 static 파일에 자바스크립트 파일을 만들어줍니다.
그리고 자바스크립트에 다음과 같이 작성해줍니다.
//mobile menu base.js
const burgerIcon = document.querySelector('a.navbar-burger');
const navbarMenu = document.querySelector('div.navbar-menu');
burgerIcon.addEventListener('click', () => {
navbarMenu.classList.toggle('is-active');
});
그리고 다시 html파일로 돌아와 body태그앞에 아래와 같이 삽입해줍니다.
{% static '파일경로' %} 입니다.
저는 static폴더에 js폴더안에 자바스크립트파일을 저장해서 다음과 같이 작성했습니다.
<script src="{% static '/js/base.js' %}"></script>
</body>
[navbar-burger 적용된 메뉴 모습]
장고 웹서버 로그에서도 base.js 라는 자바스크립트를 가져오는데 성공했다고 표시됩니다.
(html 상태코드 200 304)
[참고사이트]
Django Template 에서 static file 가져오기
Django Template 에서 static file을 접근하려면 몇가지 처리를 해줘야 한다. 예를들어, Django를 사용하지 않은 html 파일에서 같은 경로에 있는 jcanvas.js 파일을 가져오기 위해서는 한줄을 head 태그에
ank1k.tistory.com
'오늘의 오류들 > Django' 카테고리의 다른 글
| django admin 아이디 만들기 (0) | 2020.12.15 |
|---|---|
| Pip upgrade (0) | 2020.12.10 |
| Djnago objects.create() 오류 (0) | 2020.12.10 |
| Django, DateTimeField(auto_now_add=True) not working (0) | 2020.12.02 |
| 2.TypeError: __init__() missing 1 required positional argument: 'on_delete' (0) | 2020.11.26 |
