Я только учусь разрабатывать интерфейс. У меня есть проблема, чтобы сделать оверлей меню Navbar вместо выпадающего меню. когда оно достигает очень маленького окна (575,98 пикселей ниже), меню навигационной панели меняется на наложение. когда окно выше этого, выпадающая панель навигации.
Я использую jquery $(window).width(), чтобы проверить, если мое окно на очень маленьком размере, когда я нажимаю на значок гамбургера, появляется наложение. но это не происходит в моем коде, оверлей вышел, но он вдруг снова повышается
кто-нибудь может мне помочь? Буду признателен за любой ответ. заранее спасибо!
// initialize object
var overlayContent = $('#navbarSupportedContent');
var overlayBtn = $('.navbar-toggler');
var closeOverlayBtn = $('.closebtn');
if($(window).width() < 575.98) {
overlayBtn.on('click',function(){
overlayContent.css('height', '100%');
overlayContent.removeAttr('class');
// remove attribute that related with collapse
$(this).removeAttr('data-toggle data-target aria-controls aria-expanded aria-label');
});
closeOverlayBtn.on('click',function(){
overlayContent.css('height', '0');
// add back attribute
overlayBtn.attr('data-toggle', 'collapse');
overlayBtn.attr('data-target', '#navbarSupportedContent');
overlayBtn.attr('aria-controls', 'navbarSupportedContent');
overlayBtn.attr('aria-expanded', 'false');
overlayBtn.attr('aria-label', 'Toggle navigation');
// add back class
overlayContent.attr('class', 'collapse navbar-collapse');
});
}
else {
// don't do the click when windows width over 575.98 px
overlayBtn.off("click");
closeOverlayBtn.off("click");
};
@media (max-width: 575.98px) {
#navbarSupportedContent {
height: 0;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
}
#overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
#navbarSupportedContent a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
}
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a href="javascript:void(0)" class="closebtn">×</a>
<ul class="navbar-nav ml-auto" id="overlay-content">
<li class="nav-item pr-5">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item pr-5">
<a class="nav-link" href="#">Contacts</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</body>
</html>