21'C 흐림
서울 강남구
하위 메뉴 축소/호버 튜토리얼 데모가 있는 Bootstrap 5 사이드바 메뉴
하위 메뉴가 있는 사이드바 메뉴를 만드는 또 다른 부트스트랩 코드 스니펫입니다. 다채로운 호버 효과로 멋진 측면 탐색을 만듭니다. 이 탐색에는 메뉴를 토글하는 애니메이션 햄버거 아이콘이 함께 제공됩니다. 메뉴 드로어는 메인 콘텐츠를 푸시하고 오버레이가 콘텐츠를 덮습니다.
Bootstrap을 사용하여 하위 메뉴가 있는 사이드바 메뉴를 만드는 방법은 무엇입니까?
1. 사이드바 메뉴를 생성하기 위해 Bootstrap, Font Awesome 및 기타 필요한 CSS 파일을 웹사이트의 head 태그에 로드합니다.
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css'>
<link rel="stylesheet" href="css/style.css">
2. 그런 다음 탐색 및 기본 콘텐츠에 대한 HTML 구조를 다음과 같이 만듭니다.
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<div class="sidebar-header">
<div class="sidebar-brand">
<a href="#">Brand</a></div></div>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#team">Team</a></li>
<li class="dropdown">
<a href="#works" class="dropdown-toggle" data-toggle="dropdown">Works <span class="caret"></span></a>
<ul class="dropdown-menu animated fadeInLeft" role="menu">
<div class="dropdown-header">Dropdown heading</div>
<li><a href="#pictures">Pictures</a></li>
<li><a href="#videos">Videeos</a></li>
<li><a href="#books">Books</a></li>
<li><a href="#art">Art</a></li>
<li><a href="#awards">Awards</a></li>
</ul>
</li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#followme">Follow me</a></li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2"">
<p> Your content goes here... </p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
3. 이제 jQuery, Bootstrap 및 기타 JavaScript 파일을 HTML 문서에 로드합니다.
<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js'></script>
4. Finally, initialize the sidebar navigation menu in jQuery document ready function.
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});