[Bootstrap] collapse 메뉴바 / sidebar 열고닫고 구현하기 | 메뉴바 아코디언

메뉴바에 메뉴 열고닫고 하기

 

냅다 코드부터 갈깁니다.

Bootstrap 라이브러리를 이용중이라면, HTML 코드만을 이용해서 아코디언 메뉴바, 사이드바를 구현 할 수 있습니다.

 

<li>
    <a class="nav-link" data-bs-toggle="collapse"
       data-bs-target="#cloth-collapse" aria-expanded="false" id="resourceManager">
        <svg class="bi me-2" width="16" height="16">
            <use xlink:href="#grid"/>
        </svg>
        의류정보
    </a>
    <div class="collapse" id = "cloth-collapse">
        <ul>
            <li style="list-style: none; text-align: center">
                <a href="/shirts" class="nav-link">
                    ↳ 상의
                    <svg class="bi me-2" width="16" height="16">
                        <use xlink:href="#people-circle"/>
                    </svg>
                </a>
            </li>
            <li style="color: white; list-style: none; text-align: center">
                <a href="/pants" class="nav-link">
                    ↳ 하의
                    <svg class="bi me-2" width="16" height="16">
                        <use xlink:href="#people-circle"/>
                    </svg>
                </a>
            </li>
            <li style="list-style: none; text-align: center">
                <a href="/shoes" class="nav-link">
                    ↳ 신발
                    <svg class="bi me-2" width="16" height="16">
                        <use xlink:href="#people-circle"/>
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</li>

 

 

결과

 

한번씩 클릭 할 때 마다 열리고 닫히기를 반복합니다.(Toggle 수행)

 

 

 

포인트

 

아코디언 collapse 를 사용하기 위해서 메인 메뉴(클릭하면 하위 태그들이 열리는 부분)에 반드시 들어가야 하는 코드는 아래와 같습니다.

data-bs-toggle="collapse"
data-bs-target="#cloth-collapse"

 

하위 태그들에 반드시 들어가야 하는 코드는 아래와 같습니다.

 

class="collapse" id = "cloth-collapse"

 

위의 코드들에서는 반드시 data-bs-target에서의 id가 하위태그 전체 id와 같아야합니다.

 

이렇게 하면 별도의 JavaScript나 JQuery를 사용하지 않고도 아코디언 메뉴바를 구현 할 수있습니다.