gwooden_코린이

자바스크립트 부트스트랩을 이용한 메뉴만들기 본문

프론트엔드/자바스크립트

자바스크립트 부트스트랩을 이용한 메뉴만들기

gwooden22 2022. 12. 27. 23:26
728x90

1. 부트스트랩을 이용한 메뉴만들기

 

- HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


    <!-- Nav -->
      <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
          <button class="navbar-toggler" type="button">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
      </nav>

      <!-- list -->
      <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>


    <!-- bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
  
    <!-- JS -->
    <script src="script/srcipt.js"></script>
</body>
</html>

부트스트랩을 이용해 Nav와 list 코드를 가져와 사용했다. 부트스트랩을 이용하기 위해서는 CDN 연결을 해줘야 한다. CSS CDN은 <title>태그 아래에 넣어주고 script CDN은 </body> 태그에서 JS 링크와 jQuery 링크 보다 더 상위에 배치해줘야 올바르게 작동한다.

 

코드가 읽히는 순서에 따라 결과물이 달라지므로 배치에 주의할 필요가 있다.

 

 

-CSS

/* list 목록 기본 안보여지게 */
.list-group {
    display: none;
}

/* 클래스를 임의적으로 생성 display 보여지게 */
.show {
    display: block;
}

.list-group class에 display : none; 기능을 넣고 안보이게 설정을 해준다.

 

.show라는 class를 임의적으로 생성 후 display : block; 을 통해 .show 클래스를 사용할 때 다시 보여지게 설정을 해준다.

 

 

-JAVASCRIPT

/* JS */
// .navbar-toggler을 클릭 했을때 이벤트 함수
document.querySelector('.navbar-toggler').addEventListener('click', function(){

    //쿼리셀렉터로 찾은 .list-group에 .show라는 클래스를 추가
    //특정 기능을 담당하는 class를 하나 더 생성해 주는 것
    //.className로 추가하면 기존 클래스가 삭제됨
    document.querySelector('.list-group').classList.toggle('show');

});


/* jQuery */
$('.navbar-toggler').on('click', function() {

    //추가
    // $('.list-group').addClass = .classList.add();

    //삭제
    // $('.list-group').removeClass = classList.remove();

    //토글
    $('.list-group').toggleClass('show');

});

태그에 class=" 여러가지" 를 한가지 뿐만 아니라 2개, 3개 이상씩 필요에 따라 넣을 수 있다.

만약 해당 태그에 class를 통해 특정 기능을 추가해서 넣고 싶을 때 .classList 기능을 사용해 추가하고 싶은 태그에 class를 추가하는 것이 가능하다.

 

.className이라는 기능도 원하는 태그에 class명을 넣는건 같지만 누적해서 추가해주는 개념이 아닌 기존껄 지워버리고 넣어지게 되어 .className 보다는 .classList를 사용하는게 좋다.

 

-JS

  • ex)
  • document.querySelector('.넣고 싶은 태그에 기존 class명').classList('추가하고 싶은 class명');

 

- jQuery

  • ex)
  •  $('.넣고 싶은 태그에 기존 class명').addClass('추가하고 싶은 class명');
  •  $('.넣고 싶은 태그에 기존 class명').removeClass('지우고 싶은 class명');
  •  $('.넣고 싶은 태그에 기존 class명').toggleClass('토글을 하고싶은 class명');

 

 

CSS에서 설정한 .class들을 가지고 JavaScript에서 선택자를 넣고 클릭 이벤트에 대한 함수를 설정하여 왼쪽 이미지 처럼 기존에 안보이던 리스트 목록을 해당 Nav 버튼을 눌렀을떄 다시 보여지게 해주는 코드를 작성하여 해당 결과물을 출력하게 했다.

728x90
저작자표시 비영리 변경금지

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

자바스크립트 DATASET  (1) 2022.12.28
자바스크립트 이용한 다크모드 만들어보기  (0) 2022.12.27
자바스크립트 + 제이쿼리 장바구니 상품 수량  (0) 2022.12.27
자바스크립트 + 제이쿼리 장바구니 담기/추가 기능  (0) 2022.12.26
자바스크립트 + 제이쿼리 이벤트  (0) 2022.12.26
'프론트엔드/자바스크립트' Related Articles more
Comments