$(function() {
"use strict";
$(".navbar-toggler").on("click", function() {
$(".navbar-toggler").toggleClass("collapsed");
$(".offcanvas-collapse").toggleClass("open");
let menuposition = $("#toggler").offset().left + $("#toggler").width() + 55;
let windowsize = $(window).width();
let offcanvas = windowsize - menuposition;
let fromtop = $("#navigation").height() + 16;
$(".offcanvas-collapse").css("right", offcanvas);
$(".offcanvas-collapse").css("top", fromtop);
$("body").toggleClass("off-canvas-active");
if (!$(".navbar-brand").hasClass("makeappear")) {
$(".navbar-brand").addClass("makeappear");
}
if ($("body").hasClass("off-canvas-active")) {
$("html").addClass("no-scroll");
} else {
$("html").removeClass("no-scroll");
}
});
$(".off-canvas-overlay").on("click", function() {
$(".navbar-toggler").toggleClass("collapsed");
$(".offcanvas-collapse").toggleClass("open");
$("body").toggleClass("off-canvas-active");
if ($("body").hasClass("off-canvas-active")) {
$("body").addClass("nav-open");
} else {
$("body").removeClass("nav-open");
}
if ($("body").hasClass("off-canvas-active")) {
$("html").addClass("no-scroll");
} else {
$("html").removeClass("no-scroll");
}
});
});
.navbar-nav li .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
#navbarCollapse li.active {
background-color: #BA122B;
}
#navbarCollapse li.active a {
color: #FFF;
background-color: #BA122B;
}
#navbarCollapse .menu {
padding-top: 30px;
}
#navbarCollapse .dropdown-menu {
padding-left: 20px;
}
#navbarCollapse li a {
border-bottom: 1px solid #E3E3E3;
color: #BA122B;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
#navbarCollapse li a:hover {
color: #FFF;
background-color: #BA122B;
}
#navbarCollapse parent:after {
}
.body {
background-color: #f6f6f6;
padding-top: 2rem;
}
.off-canvas-active .off-canvas-overlay {
opacity: 1;
visibility: visible;
}
.off-canvas-overlay {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .75);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: .3s ease-in-out;
}
.offcanvas-collapse.open {
display: block;
-webkit-animation: slide-right .3s ease-out;
-moz-animation: slide-right .3s ease-out;
}
@-webkit-keyframes slide-right {
0% { opacity: 0; -webkit-transform: translateX(-100%); }
100% { opacity: 1; -webkit-transform: translateX(0); }
}
@-moz-keyframes slide-right {
0% { opacity: 0; -moz-transform: translateX(-100%); }
100% { opacity: 1; -moz-transform: translateX(0); }
}
.offcanvas-collapse {
position: fixed;
top: 56px;
bottom: 0;
right: 0;
width: 270px;
transition-timing-function: ease-in-out;
transition-duration: .3s;
transition-property: width;
display: none;
overflow-y:auto;
}
.navbar-expand-md .navbar-toggler {
display: block!important;
}
.navbar-toggler {
border: none;
height: 40px;
}
.navbar-toggler:active, .navbar-toggler:focus {
outline: 0;
}
.navbar-toggler .icon-bar {
display: block;
width: 30px;
height: 2px;
border-radius: 1px;
transition: .3s ease-in-out;
background-color: #BA122B;
}
.navbar-dark .navbar-toggler .icon-bar {
background: #ffffff;
}
.navbar-toggler .icon-bar:nth-of-type(1) {
transform: rotate(45deg) translate(2px, 2px);
}
.navbar-toggler .icon-bar:nth-of-type(2) {
opacity: 0;
}
.navbar-toggler .icon-bar:nth-of-type(3) {
transform: rotate(-45deg) translate(1px, -1px);
}
.navbar-toggler.collapsed .icon-bar {
margin: 5px auto;
transform: none;
opacity: 1;
}
.navbar-nav .dropdown-menu {
padding: 0;
border: none;
margin: 0;
border-radius: 0;
}
.dropdown-toggle::after {
right: 30px;
position: absolute;
top: 50%;
}
.nav-open {
overflow: hidden;
}
.no-scroll {
position: fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body class="site">
<nav id="navigation" class="navbar fixed-top navbar-white bg-white border-bottom shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">
</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="offcanvas" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="offcanvas-collapse border-left shadow-sm bg-white" id="navbarCollapse">
<ul class="nav menu navbar-nav ml-auto text-uppercase mod-list">
<li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li><li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li><li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li><li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li></ul>
</div>
</div>
</nav>
<div class="off-canvas-overlay"></div>
</body>
</html>
我已经创建了一个offcanvas菜单,该菜单可以通过单击激活。我想在菜单处于活动状态时禁用body / html滚动,并激活菜单上的滚动条。
在Capture上,我禁用了body / html上的滚动,并在菜单上启用了,可以将滚动条向右移动吗?
还是使用javascript / jquery禁用正文滚动并启用菜单滚动?
如果您有其他实现此目标的想法,请分享:)
答案 0 :(得分:1)
所以看起来您的示例就在那儿,在CSS中只有一个与滚动有关的错误需要调整。
您的JS正在将no-scroll
类正确地添加到html
元素中。但是,CSS中的.no-scroll
类的overflow-y
属性设置为scroll
而不是hidden
。 hidden
值可以防止滚动条在内容超出其附加元素的高度时显示。
如果我误解了您的问题,或者您对我的调整有任何疑问,请告诉我。
$(function() {
"use strict";
$(".navbar-toggler").on("click", function() {
$(".navbar-toggler").toggleClass("collapsed");
$(".offcanvas-collapse").toggleClass("open");
let menuposition = $("#toggler").offset().left + $("#toggler").width() + 55;
let windowsize = $(window).width();
let offcanvas = windowsize - menuposition;
let fromtop = $("#navigation").height() + 16;
$(".offcanvas-collapse").css("right", offcanvas);
$(".offcanvas-collapse").css("top", fromtop);
$("body").toggleClass("off-canvas-active");
if (!$(".navbar-brand").hasClass("makeappear")) {
$(".navbar-brand").addClass("makeappear");
}
if ($("body").hasClass("off-canvas-active")) {
$("html").addClass("no-scroll");
} else {
$("html").removeClass("no-scroll");
}
});
$(".off-canvas-overlay").on("click", function() {
$(".navbar-toggler").toggleClass("collapsed");
$(".offcanvas-collapse").toggleClass("open");
$("body").toggleClass("off-canvas-active");
if ($("body").hasClass("off-canvas-active")) {
$("body").addClass("nav-open");
} else {
$("body").removeClass("nav-open");
}
if ($("body").hasClass("off-canvas-active")) {
$("html").addClass("no-scroll");
} else {
$("html").removeClass("no-scroll");
}
});
});
.navbar-nav li .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
#navbarCollapse li.active {
background-color: #BA122B;
}
#navbarCollapse li.active a {
color: #FFF;
background-color: #BA122B;
}
#navbarCollapse .menu {
padding-top: 30px;
}
#navbarCollapse .dropdown-menu {
padding-left: 20px;
}
#navbarCollapse li a {
border-bottom: 1px solid #E3E3E3;
color: #BA122B;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
#navbarCollapse li a:hover {
color: #FFF;
background-color: #BA122B;
}
#navbarCollapse parent:after {}
.body {
background-color: #f6f6f6;
padding-top: 2rem;
}
.off-canvas-active .off-canvas-overlay {
opacity: 1;
visibility: visible;
}
.off-canvas-overlay {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .75);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: .3s ease-in-out;
}
.offcanvas-collapse.open {
display: block;
-webkit-animation: slide-right .3s ease-out;
-moz-animation: slide-right .3s ease-out;
}
@-webkit-keyframes slide-right {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes slide-right {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
.offcanvas-collapse {
position: fixed;
top: 56px;
bottom: 0;
right: 0;
width: 270px;
transition-timing-function: ease-in-out;
transition-duration: .3s;
transition-property: width;
display: none;
overflow-y: auto;
}
.navbar-expand-md .navbar-toggler {
display: block!important;
}
.navbar-toggler {
border: none;
height: 40px;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: 0;
}
.navbar-toggler .icon-bar {
display: block;
width: 30px;
height: 2px;
border-radius: 1px;
transition: .3s ease-in-out;
background-color: #BA122B;
}
.navbar-dark .navbar-toggler .icon-bar {
background: #ffffff;
}
.navbar-toggler .icon-bar:nth-of-type(1) {
transform: rotate(45deg) translate(2px, 2px);
}
.navbar-toggler .icon-bar:nth-of-type(2) {
opacity: 0;
}
.navbar-toggler .icon-bar:nth-of-type(3) {
transform: rotate(-45deg) translate(1px, -1px);
}
.navbar-toggler.collapsed .icon-bar {
margin: 5px auto;
transform: none;
opacity: 1;
}
.navbar-nav .dropdown-menu {
padding: 0;
border: none;
margin: 0;
border-radius: 0;
}
.dropdown-toggle::after {
right: 30px;
position: absolute;
top: 50%;
}
.nav-open {
overflow: hidden;
}
.no-scroll {
position: fixed;
width: 100%;
height: 100%;
overflow-y: hidden; /* Switched `scroll` to `hidden` */
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body class="site">
<nav id="navigation" class="navbar fixed-top navbar-white bg-white border-bottom shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">
</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="offcanvas" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="offcanvas-collapse border-left shadow-sm bg-white" id="navbarCollapse">
<ul class="nav menu navbar-nav ml-auto text-uppercase mod-list">
<li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li><li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li><li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li><li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li><li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-110"><a href="#" class="nav-link">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown"><a href="/demo/aasssssssssssssssssssssss-2" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "="">testing</a><ul class="nav-child unstyled small dropdown-menu"><li class="item-111"><a href="#" class="nav-link">level 3</a></li></ul></li><li class="item-105"><a href="#" class="nav-link">testing</a></li><li class="item-106"><a href="#" class="nav-link">testing</a></li><li class="item-107"><a href="#" class="nav-link">testing</a></li><li class="item-108"><a href="#" class="nav-link">testing</a></li><li class="item-109"><a href="#" class="nav-link">testing</a></li></ul>
</div>
</div>
</nav>
<div class="off-canvas-overlay"></div>
</body>
</html>
根据您的评论,我已经调整了格式。 Bootstrap处理其模态及其滚动条的方式是使覆盖全页并允许其垂直滚动,而不仅仅是模态滚动内部的菜单。
这是经过调整的代码段:
$(function() {
"use strict";
$(".navbar-toggler").on("click", function() {
$(".navbar-toggler").toggleClass("collapsed");
$(".offcanvas-collapse").toggleClass("open");
let menuposition = $("#toggler").offset().left + $("#toggler").width() + 55;
let windowsize = $(window).width();
let offcanvas = windowsize - menuposition;
let fromtop = $("#navigation").height() + 16;
// $(".offcanvas-collapse").css("right", offcanvas);
$(".offcanvas-collapse").css("top", fromtop);
$("body").toggleClass("off-canvas-active");
if (!$(".navbar-brand").hasClass("makeappear")) {
$(".navbar-brand").addClass("makeappear");
}
if ($("body").hasClass("off-canvas-active")) {
$("html").addClass("no-scroll");
} else {
$("html").removeClass("no-scroll");
}
});
$(".off-canvas-overlay").on("click", function() {
$(".navbar-toggler").toggleClass("collapsed");
$(".offcanvas-collapse").toggleClass("open");
$("body").toggleClass("off-canvas-active");
if ($("body").hasClass("off-canvas-active")) {
$("body").addClass("nav-open");
} else {
$("body").removeClass("nav-open");
}
if ($("body").hasClass("off-canvas-active")) {
$("html").addClass("no-scroll");
} else {
$("html").removeClass("no-scroll");
}
});
});
.navbar-nav li .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
#navbarCollapse li.active {
background-color: #BA122B;
}
#navbarCollapse li.active a {
color: #FFF;
background-color: #BA122B;
}
#navbarCollapse .menu {
padding-top: 30px;
width: 270px; /* Set the fixed width in the menu itself */
margin-right: 50px; /* Add some spacing between the right side and the menu */
}
#navbarCollapse .dropdown-menu {
padding-left: 20px;
}
#navbarCollapse li a {
border-bottom: 1px solid #E3E3E3;
color: #BA122B;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
}
#navbarCollapse li a:hover {
color: #FFF;
background-color: #BA122B;
}
#navbarCollapse parent:after {}
.body {
background-color: #f6f6f6;
padding-top: 2rem;
}
.off-canvas-active .off-canvas-overlay {
opacity: 1;
visibility: visible;
}
.off-canvas-overlay {
position: fixed;
right: 0;
top: 0;
width: 100%;
height: 100%; /* Set the overlay to take up the entire page */
background-color: rgba(0, 0, 0, .75);
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: .3s ease-in-out;
}
.offcanvas-collapse.open {
display: block;
-webkit-animation: slide-right .3s ease-out;
-moz-animation: slide-right .3s ease-out;
}
@-webkit-keyframes slide-right {
0% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes slide-right {
0% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
.offcanvas-collapse {
position: fixed;
top: 56px;
bottom: 0;
right: 0;
transition-timing-function: ease-in-out;
transition-duration: .3s;
transition-property: width;
display: none;
overflow-y: auto;
width: 100%;
}
.navbar-expand-md .navbar-toggler {
display: block!important;
}
.navbar-toggler {
border: none;
height: 40px;
}
.navbar-toggler:active,
.navbar-toggler:focus {
outline: 0;
}
.navbar-toggler .icon-bar {
display: block;
width: 30px;
height: 2px;
border-radius: 1px;
transition: .3s ease-in-out;
background-color: #BA122B;
}
.navbar-dark .navbar-toggler .icon-bar {
background: #ffffff;
}
.navbar-toggler .icon-bar:nth-of-type(1) {
transform: rotate(45deg) translate(2px, 2px);
}
.navbar-toggler .icon-bar:nth-of-type(2) {
opacity: 0;
}
.navbar-toggler .icon-bar:nth-of-type(3) {
transform: rotate(-45deg) translate(1px, -1px);
}
.navbar-toggler.collapsed .icon-bar {
margin: 5px auto;
transform: none;
opacity: 1;
}
.navbar-nav .dropdown-menu {
padding: 0;
border: none;
margin: 0;
border-radius: 0;
}
.dropdown-toggle::after {
right: 30px;
position: absolute;
top: 50%;
}
.nav-open {
overflow: hidden;
}
.no-scroll {
position: fixed;
width: 100%;
height: 100%;
overflow-y: hidden;
/* Switched `scroll` to `hidden` */
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body class="site">
<nav id="navigation" class="navbar fixed-top navbar-white bg-white border-bottom shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">
</a>
<button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="offcanvas" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="offcanvas-collapse border-left shadow-sm" id="navbarCollapse">
<ul class="nav menu navbar-nav ml-auto text-uppercase mod-list bg-white">
<li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li>
<li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "=" ">testing</a><ul class="nav-child unstyled small dropdown-menu "><li class="item-110 "><a href="# " class="nav-link
">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown "><a href="/demo/aasssssssssssssssssssssss-2 " class="nav-link dropdown-toggle " data-toggle="dropdown " aria-expanded="false " "="">testing</a>
<ul class="nav-child unstyled small dropdown-menu">
<li class="item-111"><a href="#" class="nav-link">level 3</a></li>
</ul>
</li>
<li class="item-105"><a href="#" class="nav-link">testing</a></li>
<li class="item-106"><a href="#" class="nav-link">testing</a></li>
<li class="item-107"><a href="#" class="nav-link">testing</a></li>
<li class="item-108"><a href="#" class="nav-link">testing</a></li>
<li class="item-109"><a href="#" class="nav-link">testing</a></li>
<li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li>
<li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "=" ">testing</a><ul class="nav-child unstyled small dropdown-menu "><li class="item-110 "><a href="# " class="nav-link
">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown "><a href="/demo/aasssssssssssssssssssssss-2 " class="nav-link dropdown-toggle " data-toggle="dropdown " aria-expanded="false " "="">testing</a>
<ul class="nav-child unstyled small dropdown-menu">
<li class="item-111"><a href="#" class="nav-link">level 3</a></li>
</ul>
</li>
<li class="item-105"><a href="#" class="nav-link">testing</a></li>
<li class="item-106"><a href="#" class="nav-link">testing</a></li>
<li class="item-107"><a href="#" class="nav-link">testing</a></li>
<li class="item-108"><a href="#" class="nav-link">testing</a></li>
<li class="item-109"><a href="#" class="nav-link">testing</a></li>
<li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li>
<li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "=" ">testing</a><ul class="nav-child unstyled small dropdown-menu "><li class="item-110 "><a href="# " class="nav-link
">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown "><a href="/demo/aasssssssssssssssssssssss-2 " class="nav-link dropdown-toggle " data-toggle="dropdown " aria-expanded="false " "="">testing</a>
<ul class="nav-child unstyled small dropdown-menu">
<li class="item-111"><a href="#" class="nav-link">level 3</a></li>
</ul>
</li>
<li class="item-105"><a href="#" class="nav-link">testing</a></li>
<li class="item-106"><a href="#" class="nav-link">testing</a></li>
<li class="item-107"><a href="#" class="nav-link">testing</a></li>
<li class="item-108"><a href="#" class="nav-link">testing</a></li>
<li class="item-109"><a href="#" class="nav-link">testing</a></li>
<li class="item-102 default current active"><a href="/demo/" class=" nav-link">Welcome!</a></li>
<li class="item-103 deeper parent dropdown"><a href="#" title="#pageSubmenu" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false" "=" ">testing</a><ul class="nav-child unstyled small dropdown-menu "><li class="item-110 "><a href="# " class="nav-link
">level 2</a></li></ul></li><li class="item-104 deeper parent dropdown "><a href="/demo/aasssssssssssssssssssssss-2 " class="nav-link dropdown-toggle " data-toggle="dropdown " aria-expanded="false " "="">testing</a>
<ul class="nav-child unstyled small dropdown-menu">
<li class="item-111"><a href="#" class="nav-link">level 3</a></li>
</ul>
</li>
<li class="item-105"><a href="#" class="nav-link">testing</a></li>
<li class="item-106"><a href="#" class="nav-link">testing</a></li>
<li class="item-107"><a href="#" class="nav-link">testing</a></li>
<li class="item-108"><a href="#" class="nav-link">testing</a></li>
<li class="item-109"><a href="#" class="nav-link">testing</a></li>
</ul>
</div>
</div>
</nav>
<div class="off-canvas-overlay"></div>
</body>
</html>