Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите с меню - добавить css если меню открыто (https://javascript.ru/forum/misc/82007-pomogite-s-menyu-dobavit-css-esli-menyu-otkryto.html)

igorfelix89 28.02.2021 09:52

Помогите с меню - добавить css если меню открыто
 
Добрый день, есть меню бургер от boostrap 4

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>


Если оно открыто, хочу css добавить
в класс

.bg-dark {
background-color: #00011b !important;

}


что б стало так

.bg-dark {
background-color: #00011b !important; 

height: 100%;height: 100%;
overflow-y: scroll;

}


но только когда бургер меню открыто, если меню закрываем, то удаляло обратно, иначе верстка ползет.


Что нужно прописать в js..

вот как определить что открыли меню..

$(document).ready(function () {
        $("navbar-toggler").click(function (e) {
          ......
        });
    });


и правильно ли я указываю $("navbar-toggler").click(function (e) {

рони 28.02.2021 10:43

igorfelix89,
$(function() {
$('#navbarCollapse').on('hidden.bs.collapse', function () { alert("hidden");
  // do something…
})
$('#navbarCollapse').on('show.bs.collapse', function () { alert("show");
  // do something…
})

});

igorfelix89 28.02.2021 16:36

Спасибо за ответ. вот что мне удалось сделать

$(function() {
$('#navbarCollapse').on('hidden.bs.collapse', function () {
  // do something…
  var sideBar = document.querySelector('#menus');
  sideBar.classList.remove('scrolly');
  
})
$('#navbarCollapse').on('show.bs.collapse', function () {
  // do something…
var sideBar = document.querySelector('#menus');
sideBar.classList.add('scrolly');
})

});



html меню бургера:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="menus">

после bg-dark, дописываем .scrolly

css:
.scrolly {height: 100%; overflow-y: scroll;}


Работает как надо! Но, видно мерцание меню, как будто бы есть доля секунды задержки.. глаза замечают что нет плавности. может быть есть еще какой-то способ ?

igorfelix89 28.02.2021 17:03

а еще такой способ нашел.

$(function() {
$('#navbarCollapse').on('hidden.bs.collapse', function () {
  // do something…
 $('.bg-dark').removeClass('active');
 
  
})
$('#navbarCollapse').on('show.bs.collapse', function () {
  // do something…
$('.bg-dark').addClass('active');

})

});



css: .bg-dark.active {height: 100%; overflow-y: scroll;}

html : <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" id="menus">

рони 28.02.2021 17:24

igorfelix89,
лучше сразу делать минимальный макет



[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

igorfelix89 28.02.2021 17:30

Спасибо, поигрался со стилями, убрал дрыг меню, немного деревенский способ, но получилось по другому и тоже вполне неплохой вариант!!


Часовой пояс GMT +3, время: 06:01.