Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.02.2021, 10:52
Новичок на форуме
Отправить личное сообщение для igorfelix89 Посмотреть профиль Найти все сообщения от igorfelix89
 
Регистрация: 30.11.2018
Сообщений: 7

Помогите с меню - добавить 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) {

Последний раз редактировалось igorfelix89, 28.02.2021 в 11:02.
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2021, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

});
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2021, 17:36
Новичок на форуме
Отправить личное сообщение для igorfelix89 Посмотреть профиль Найти все сообщения от igorfelix89
 
Регистрация: 30.11.2018
Сообщений: 7

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

$(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;}


Работает как надо! Но, видно мерцание меню, как будто бы есть доля секунды задержки.. глаза замечают что нет плавности. может быть есть еще какой-то способ ?
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2021, 18:03
Новичок на форуме
Отправить личное сообщение для igorfelix89 Посмотреть профиль Найти все сообщения от igorfelix89
 
Регистрация: 30.11.2018
Сообщений: 7

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

$(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">
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2021, 18:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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



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

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2021, 18:30
Новичок на форуме
Отправить личное сообщение для igorfelix89 Посмотреть профиль Найти все сообщения от igorfelix89
 
Регистрация: 30.11.2018
Сообщений: 7

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58
Помогите с меню sc2r2bey Элементы интерфейса 7 31.03.2010 10:39
Подскажите как сделать меню на CSS если: greatilya (X)HTML/CSS 10 18.10.2009 20:26
Помогите сделать простое меню debugger Элементы интерфейса 1 09.09.2008 23:14