#func; 사이드 드롭다운 메뉴 숨기기

사용된 라이브러리 및 프레임워크

Bootstrap css 4.6.0
Bootstrap js 4.6.0
Jquery 3.5.0
popper 1.14.0

#HTML

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Sidebar</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!--사이드 메뉴와 콘텐츠 영역을 나누기 위한 레이아웃 영역-->
<div class="wrapper">
    <!--사이드 메뉴-->
    <nav id="sidebar">
        <ul class="list-unstyled components">
            <li>
                <a href="#dropdownMenu1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    Menu1
                </a>
                <!--드롭다운 메뉴-->
                <ul class="collapse list-unstyled" id="dropdownMenu1">
                    <li>
                        <a href="#">Menu1-1</a>
                    </li>
                    <li>
                        <a href="#">Menu1-2</a>
                    </li>
                    <li>
                        <a href="#">Menu1-3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#dropdownMenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    Menu2
                </a>
                <!--드롭다운 메뉴-->
                <ul class="collapse list-unstyled" id="dropdownMenu2">
                    <li>
                        <a href="#">Menu2-1</a>
                    </li>
                    <li>
                        <a href="#">Menu2-2</a>
                    </li>
                    <li>
                        <a href="#">Menu2-3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    Menu3
                </a>
            </li>
        </ul>
    </nav>
    <!--콘텐츠영역-->
    <div id="content">
        <!--토글 버튼-->
        <button type="button" class="btn btn-info" id="sidebarToggle">
            사이드 메뉴 숨기기
        </button>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script>
    $(function () {
       $('#sidebarToggle').on('click', function () {
          $('#sidebar').toggleClass('active');
       });
    });
</script>
</html>

- ul은 브라우저에서 제공하는 기본 스타일이 적용되서 보이는데 다르게 꾸미기위해선 해당 스타일을 없애야하므로 list-unstyled 를 class에 선언한다.

- 드롭다운 메뉴를 사용하기 위해 상위메뉴인 a 태그의 href 속성값과 하위 메뉴의 ul 태그의 id 속성값이 일치해야한다.

- 상위메뉴 ul 태그 안 a 태그는 ... data-toggle="collapse" aria-expanded="false" class="dropdown-toggle" 속성들을 추가해줘야한다.

#CSS

/*레이아웃 영역 지정*/
.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

/*메뉴 텍스트에 마우스 올려놓을 시 밑줄생김 방짐*/
a, a:hover {
    text-decoration: none;
}

/*사이드 메뉴 영역*/
#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
    background-color: lightskyblue;
    transition: 0.5s all;
}

#sidebar ul li a {
    padding: 10px 15px;
    font-size: 1.1em;
    display: block;
    color: black;
}

/*사이드 메뉴 숨기기 버튼 클릭 시 사이드 메뉴에 스타일 설정*/
#sidebar.active {
    margin-left: -250px;
}

a[data-toggle="collapse"] {
    position: relative;
}

/*상위 메뉴의 화살표 스타일 설정*/
.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

/*하위 메뉴의 텍스트 스타일 설정*/
ul ul a {
    font-size: 0.9em !important;
    padding-left: 24px !important;
    background-color: aliceblue;
}

- #sidebar의 스타일 속성 중에서 transition은 CSS 속성을 변경할 때 애니메이션 속도를 지정할 수 있습니다.

- 사이드 메뉴가 숨김 상태가 되면 class 속성에 active 가 추가되면서 #sidebar.active 에서 지정한 CSS 속성이 반영됨

#JS

...
<script>
    $(function () {
       $('#sidebarToggle').on('click', function () {
          $('#sidebar').toggleClass('active');
       });
    });
</script>
...

- HTML에서 콘텐츠 영역에 있는 button(sidebarToggle)을 클릭하면 사이드 메뉴 영역인 nav(sidebar) 태그의 class 속성 값 active를 추가한다.

[출처]

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니

developer.mozilla.org

https://bootstrapious.com/p/bootstrap-sidebar

Bootstrap Sidebar Tutorial - Step-by-step tutorial with 5 sidebar templates [updated in 2021]

Today I’d like to show you how to create a collapsible HTML sidebar navigation using Bootstrap 4 with some CSS and jQuery. Since Bootstrap 4…

bootstrapious.com

저작자표시 (새창열림)

'Web' 카테고리의 다른 글

#func; table에서 특정영역이 고정된 가로 스크롤 생성 (0)	2020.03.21

블로그의 정보

DataEdit

Bigdaditor

#func; 사이드 드롭다운 메뉴 숨기기

'Web' 카테고리의 다른 글

블로그의 정보

활동하기

티스토리툴바

'Web' 카테고리의 다른 글

블로그의 정보

활동하기

공유하기

다른 글

티스토리툴바