서브메뉴를 만들기 위해서는 css를 이용해서 만들 수 있지만 이번에는 bootstrap이라는 프레임워크를 이용해서 만들어보려고 한다.
1. bootstrap이란
각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것
2. bootstrap 설치하기
https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
getbootstrap.com
위의 사이트로 들어가서 Starter template을 복사하고 내부에 있는 주석을 삭제해준다.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
⚠️주의!⚠️
bootstrap UI들에 css를 적용하려면 class 명을 수정해야한다.
3. navbar 만들기
class 명을 동시에 a, b 두개를 짓고 class 명을 바꾸면서 a일 때는 items이 노출되고 b일 때는 items이 숨김처리되도록 만든다.
<!-- JavaScript -->
<script>
// 방법 1
var count = 0;
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
count+=1;
if (count%2==1) {
document.getElementsByClassName('list-group')[0].classList.add('show')
//원하는 요소에 클래스명 추가하기
} else {
document.getElementsByClassName('list-group')[0].classList.remove('show')
//원하는 요소에 클래스명 삭제하기
}
})
// 방법 2
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show')
})
</script>
[방법 정리]
1. navbar items의 class명을 "list-group"이라고 이름을 짓는다.
2. class명이 "list-group"이면 보여지지 않고 class명이 "show"이면 보이도록 css를 짠다.
3. 버튼이 홀수번 눌리면 navbar items의 class명에 show를 추가하고 짝수번 눌리면 navbar items의 class명에 show를 삭제
전체코드
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>Hello, world!</title>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- navbar items -->
<ul class="list-group"> <!-- 띄워쓰기로 class 이름을 동시에 두개 만들었다. -->
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<!-- JavaScript -->
<script>
var count = 0;
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
count+=1;
if (count%2==1) {
document.getElementsByClassName('list-group')[0].classList.add('show')
//원하는 요소에 클래스명 추가하기
} else {
document.getElementsByClassName('list-group')[0].classList.remove('show')
//원하는 요소에 클래스명 삭제하기
}
})
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
.list-group{
display: none;
}
.show{
display: block;
}
'Web > JAVASCRIPT' 카테고리의 다른 글
| jQuery (0) | 2023.07.13 |
|---|---|
| 이벤트 리스너 (0) | 2023.07.13 |
| function의 파라미터 문법 (0) | 2023.07.12 |
| 자바스크립트 function 문법 사용법 (0) | 2023.07.12 |
| 동적 UI만들기 (alert) (0) | 2023.07.11 |