부트스트랩 offcanvas

매뉴얼 FAQ
그누보드5
데모
자료실
  • 다운로드
  • 매뉴얼
  • Q&A
    • 창작마당
  • 팁자료실
  • 스킨
  • 빌더
  • 테마
  • 플러그인
  • 사용후기
    • 영카트5
    데모
    자료실
    창작마당
    Q & A
    궁금한 게 있으신가요? 지금 질문해보세요!
    솔루션
    프로그래밍
    서버
    사이트운영
    컨텐츠몰
    나의 재능을 팔아보세요!
    부가서비스
    국내최저! 신용카드 결제수수료 2.85%
    제작의뢰
    커뮤니티
    커뮤니티
    소모임
    스터디
    자사몰
    강좌
    기타
    부트스트랩 offcanvas

    QA

    부트스트랩 offcanvas

    본문

    부트스트랩 예제(https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/)를 보면

    아래와 같은 예제가 나오는데요.

     

    아래 그림에서 화면의 폭이 좁아지면 toggle버튼이 나타납니다.

    그래서 toggle를 클릭하면 offcanvas가 우측에서 나타나는데요...

    832838671_1657093719.0603.png

     

    아래그림처럼...search부분은 없애고 그 자리에 toggle버튼이 화면의 폭에 상관없이 항상 나타나서 

    toggle버튼을 클릭하면 우측에서 offcanvas가 나타나게 할 수는 없는지요.

    아무리 해도 되지를 않스니다.

    832838671_1657093929.3828.png

     

    고수님들의 조언을 부탁드립니다.

     

     

     

    소스는 아래와 같습니다.

    <!doctype html>

    <html lang="en">

      <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <meta name="description" content="">

        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

        <meta name="generator" content="Hugo 0.88.1">

        <title>Offcanvas navbar template · Bootstrap v5.1</title>

     

        <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/offcanvas-navbar/">

     

       

     

        <!-- Bootstrap core CSS -->

    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

     

        <style>

          .bd-placeholder-img {

            font-size: 1.125rem;

            text-anchor: middle;

            -webkit-user-select: none;

            -moz-user-select: none;

            user-select: none;

          }

     

          @media (min-width: 768px) {

            .bd-placeholder-img-lg {

              font-size: 3.5rem;

            }

          }

        </style>

     

       

        <!-- Custom styles for this template -->

        <link href="offcanvas.css" rel="stylesheet">

      </head>

      <body class="bg-light">

       

    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">

      <div class="container-fluid">

        <a class="navbar-brand" href="#">Offcanvas navbar</a>

        <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">

          <span class="navbar-toggler-icon"></span>

        </button>

     

        <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">

          <ul class="navbar-nav me-auto mb-2 mb-lg-0">

            <li class="nav-item">

              <a class="nav-link active" aria-current="page" href="#">Dashboard</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Notifications</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Profile</a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Switch account</a>

            </li>

            <li class="nav-item dropdown">

              <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>

              <ul class="dropdown-menu" aria-labelledby="dropdown01">

                <li><a class="dropdown-item" href="#">Action</a></li>

                <li><a class="dropdown-item" href="#">Another action</a></li>

                <li><a class="dropdown-item" href="#">Something else here</a></li>

              </ul>

            </li>

          </ul>

          <form class="d-flex">

            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">

            <button class="btn btn-outline-success" type="submit">Search</button>

          </form>

        </div>

      </div>

    </nav>





     

        <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>

     

          <script src="offcanvas.js"></script>

      </body>

    </html>

     

    #토글 #오프캔버스 #부트스트랩

    이 질문에 댓글 쓰기 :

    답변 1

    야식금지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

    218.♡.♡.78

    좀 쓸데없는 것들은 생략했으니까 주석을 참고해서 한번 해보세요.

     

    
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, 그리고 Bootstrap 기여자들">
<meta name="generator" content="Hugo 0.88.1">
<title>Offcanvas navbar template · Bootstrap v5.1</title>
<link rel="canonical" href="https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/">
<link href="https://getbootstrap.kr/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet">
<meta name="theme-color" content="#7952b3">
<style>
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}
/* ============== 새로 추가된 것들 =================== */
/* 버튼이 사라지지 않도록 함 */
.navbar-expand-lg .navbar-toggler {
    display: inline-block !important;
}
/* 오프캔버스 메뉴가 위쪽으로 붙게 함 */
.navbar-expand-lg .navbar-collapse {
    align-items: flex-start !important;
}
/* 오프캔버스 메뉴가 세로로 졍렬되게 함 */
.navbar-expand-lg .navbar-nav {
    flex-direction: column !important;
}
/* 오프캔버스 메뉴의 하단 마진 제거 */
.mb-lg-0 {
    margin-bottom:0 !important;
}
/* 오프캔버스가 항상 오프캔버스인 형태로 유지 */
.offcanvas-collapse {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
}
</style>
<link href="https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/offcanvas.css" rel="stylesheet">
</head>
<body class="bg-light">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
        <div class="container-fluid">
            <!-- 브랜드 -->
            <a class="navbar-brand" href="#">Offcanvas navbar</a>
            
            <!-- 기존 숨겨진 햄버거 버튼 위치 / 메뉴 뒤로 이동하도록 함 -->
            <!--
            <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            -->
            <!-- 네비게이션 메뉴 자체가 오프캔버스로 변신하게 되므로, 항상 오프캔버스 형태로 유지한다는 것은 화면이 넓을때 가로로 생겨나는 메뉴는 안쓰겠다는 의미와 같음 -->
            <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Notifications</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Switch account</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Settings</a>
                        <ul class="dropdown-menu" aria-labelledby="dropdown01">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 검색창 / 없애버림 -->
                <!--
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
                -->
            </div>
            <!-- 이동한 햄버거 버튼 위치 -->
            <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    
    <div class="nav-scroller bg-body shadow-sm">
        <!-- 내용생략 -->
    </div>
    <main class="container">
        <!-- 내용생략 -->
    </main>
    <script src="https://getbootstrap.kr/docs/5.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://getbootstrap.kr/docs/5.1/examples/offcanvas-navbar/offcanvas.js"></script>
</body>
</html>
    답변을 작성하시기 전에 로그인 해주세요.
    전체 26
    QA 내용 검색

    회원로그인

    인기태그
    #그누보드5(61278) #영카트5(17117) #php(15421) #그누보드4(10639) #게시판(3229) #javascript(2660) #그누보드(2429) #css(2086) #mysql(1543) #영카트(1284) #모바일(1284) #그누커머스(1178) #html(1124) #jquery(1020) #최신글(953) #자바스크립트(946) #DB(840) #로그인(806) #이미지(773) #여분필드(766)
    (주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
    사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
    © SIRSOFT