로그인  회원가입  
인포앤북 홈

7-5. 오프캔버스

■ 오프캔버스

오프캔버스(offcanvas)는 모달 창과 유사하지만, 사이드바 메뉴로 자주 사용된다는 점이 다릅니다.

오프캔버스캔
ex7-5.html
    <div class="offcanvas offcanvas-start" id="offcanvas1">
        <div class="offcanvas-header">
          <h1 class="offcanvas-title">제목</h1>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <p>안녕하세요.</p>
            <p>안녕하세요.</p>
            <p>안녕하세요.</p>
            <div class="dropdown mt-3">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
                    메뉴
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <li><a class="dropdown-item" href="#">메뉴1</a></li>
                    <li><a class="dropdown-item" href="#">메뉴2</a></li>
                    <li><a class="dropdown-item" href="#">메뉴3</a></li>
                </ul>
            </div>
        </div>
    </div>
      
    <div class="container-fluid mt-3">
        <h3>오프캔버스(offcanvas) 사용 예</h3>
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvas1">
            버튼 클릭!
        </button>
    </div>
ex7-5.html의 실행 결과