<style>
#ColCategoryBar {
position: static;
vertical-align: top;
}
#ColCategoryBox {
width: 100%;
height: 100%;
border: 0;
padding: 0 10px 0 10px;
display: inline-block;
vertical-align: top;
overflow-y: auto;
}
#ColEmpty {
display: none;
overflow-y: hidden
}
@media all and (min-width:993px) {
#ColCategoryBar {
display: inline-block
}
#SliderButton {
display: none
}
}
@media all and (max-width:992px) {
#ColCategoryBar {
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
position: fixed;
z-index: 1001;
background-color: rgba(190,190,190,0.6);
}
#ColCategoryBox {
width: 80%;
display: inline-block;
overflow-y: auto;
background-color: #fff;
border: 1px solid #000;
vertical-align: top;
}
#ColEmpty {
width: 17%;
height: 100%;
display: inline-block;
vertical-align: top
}
#SliderButton {
display: inline;
}
}
</style>
<style>
.slide_menu::-webkit-scrollbar
{
display:none;
}
.slide_menu
{
overflow:scroll
}
</style>
<nav class="navbar navbar-expand-lg " style="margin:0;padding:5px 0 0 0; background-color:#eee; margin-bottom:10px;border-bottom:#ddd">
<div style="width:calc( 100% - 48px ) " >
<div class="slide_menu" >
<ul class="nav nav-tabs" id="SlideTab" style="width:800px;" >
<li class="nav-item">
<a href="#" class="nav-link" > 1번째 텝</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" > 2번째 텝</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"> 3번째 텝</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"> 4번째 텝</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link"> 5번째 텝</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" > 6번째 텝</a>
</li>
</ul>
</div>
</div>
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ColCategoryBar" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars" ></i>
</button>
</div>
</nav>
<div class="container" >
<div class="row">
<div id="ColCategoryBar" class="col-lg-2 collapse">
<div id="ColCategoryBox" >
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="ColEmpty" data-toggle="collapse" data-target="#ColCategoryBar">
</div>
</div>
<div class="col-lg-10" >
content
</div>
</div>
</div>
<div id="SliderButton" style="position:fixed;z-index:99;bottom:5px;right:3%">
<button type="button" data-toggle="collapse" data-target="#ColCategoryBar" >
<span> menu </span>
</button>
</div>
<script>
var triggerTabList = [].slice.call(document.querySelectorAll('#SlideTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
</script>