[JS] 부트스트랩(bootstrap)으로 내비게이션바 만들기

자바스크립트로 '버튼을 누르면 하단의 메뉴 리스트를 보이게 만들면 된다.'

//상단의 내비게이션 코드 - bootstrap

<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand">Navbar</span>
      <button class="navbar-toggler" type="button" id="navbtn">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
</nav>

 

//하단의 메뉴 리스트 - bootstrap

<div class="listgroup">
    <ul class="list-group">
      <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>
</div>

 

 

방법1. 

1. 하단의 메뉴 리스트를 숨긴다.

2. 버튼을 누르면 메뉴 리스트를 보이게 만든다.

 

1. 하단의 메뉴 리스트를 숨긴다.

.listgroup{
	visibility : hidden;
}

2. 버튼을 누르면 메뉴 리스트를 보이게 만든다.

-> Css에서 visibility를 visible로 바꾸도록 JavaScript 코드를 짠다.

<script>

        document.getElementById('navbtn').addEventListener('click',function(){
            document.getElementsByClassName('listgroup')[0].style.visibility = 'visible';
        });

</script>

navbtn이라는 Id를 가진 버튼에 addEventListener로 이벤트가 발생하면 동작할 수 있도록 코드를 짠다.

이때는 'click' , 버튼을 클릭했을 때 콜백함수를 실행시켜 준다.

listgroup이라는 class 이름을 가진 요소 중 위에서부터 1번째를 찾아와서 그 안에 있는 css class(지금은 listgroup)의 style, visibility의 속성을 visible로 바꿔라.

결과물

 

(심화)

누를 때마다 메뉴 리스트가 보였다가 안 보였다가 하는 방법

<script>

var count = 0;
        document.getElementById('navbtn').addEventListener('click',function(){
            count++;
            if(count % 2 == 1){
                document.getElementsByClassName('listgroup')[0].style.visibility = 'visible';
            }else{
                document.getElementsByClassName('listgroup')[0].style.visibility = 'hidden';
            }
        });

</script>

 

 

설명

웹 페이지에서 오른쪽 버튼을 눌러 '검사'를 클릭한다.

 

그러면 사진과 같은 화면이 뜨는데, 여기서 console을 클릭하면

겉으로는 아무 동작하지 않는 것처럼 보이지만, 여기서 내부 동작을 살펴볼 수 있다.

 

 콘솔창에서 count값이 버튼을 누를 때 마다 1개씩 증가함

<script>
	var count = 0;
    document.getElementById('navbtn').addEventListener('click',function(){
    	count++;
    
    });


</script>

count라는 변수를 선언해 주었고, navbtn이라는 Id를 가진 버튼에 addEventListener로 click이벤트(버튼을 클릭하는 이벤트)가 발생할 시 count에 저장된 숫자가 한 개씩 증가하도록 설정해 주었다. 위 동영상을 보면 count가 콘솔창에 하나씩 증가하는 모습을 볼 수 있다.

 

그러면 count 값이 처음에는 0이었고, 가려진 상태였으며

한 번 눌렀을 때 1이 되고, 메뉴 리스트가 뜨며

두 번 눌렀을 때 2가 되고, 메뉴리스트가 가려지며

세 번 눌렀을 때 3이 되고, 메뉴 리스트가 뜬다.

...

이렇게

짝수 번째에는 가려지고 홀수 번째에는 메뉴 리스트가 뜬다.

그럼 그런 식으로 조건식을 걸어서 짝수일 땐 뜨도록 홀수일 때는 메뉴 리스트가 뜨도록 한다.

<script>

	var count = 0;
    document.getElementById('navbtn').addEventListener('click',function(){
		count++;
        if(count % 2 == 1){
        	document.getElementsByClassName('listgroup')[0].style.visibility = 'visible';
        }else{
        	document.getElementsByClassName('listgroup')[0].style.visibility = 'hidden';
        }
    });

</script>

홀수일 땐, listgroup이라는 class 이름을 가진 요소를 찾아 그 css class의 visibility라는 속성을 visible이라고 바꿔줬고

짝수일 땐, listgroup이라는 class 이름을 가진 요소를 찾아 그 css class의 visibility라는 속성을 hidden이라고 바꿔주었다.

최종 결과물

 

//jQuery로 짜면

<script>

	var count = 0;
    $('#navbtn').on('click',function(){
		count++;
        if(count % 2 == 1){
        	$('.listgroup').css('visibility','visible')
        }else{
        	$('.listgroup').css('visibility','hidden')
        }
    });

</script>

 

 

 

방법2. 

1. 메뉴리스트를 평소에 가려두는 class를 만들고

2. 보이도록 만든 class를

3. 1번에 만든 class 옆에 부착하도록 JavaScript 코드를 짠다.

 

1. 메뉴 리스트를 평소에 가려두는 class를 만들고

.listgroup{
    visibility: hidden;
}

<div class="listgroup">
    <ul class="list-group">
      <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>
</div>

메뉴리스트를 감싸고 있는 div 박스를 listgroup라는 class로 만든다.

 

2. 보이도록 만든 class를

.listgroup{
    visibility: hidden;
}
.show{
    visibility: visible;
}

3. 1번에 만든 class 옆에 부착한다.

<script>

    document.getElementById('navbtn').addEventListener('click',function(){
        document.getElementsByClassName('listgroup')[0].classList.toggle('show');
    });

</script>

navbtn 이라는 Id를 가진 버튼에 'click' 이벤트가 발생할 때마다 콜백 함수를 실행시켜 주세요.

콜백 함수 -> listgroup이라는 class를 가지고 있는 html 요소 중 위에서부터 1번째인 것을 가져와, classList에(<div class="listgroup">) show라는 클래스를 toggle로 땠다 붙였다 해주세요(<div class="listgroup show">) || (<div class="listgroup">)이런 식으로

//jQuery로 짰을 때

<script>

    $('#navbtn').on('click',function(){
        $('.listgroup').toggleClass('show');
    });

</script>

결과물