@Kirinayik

Как при адаптивности прятать элементы навигации?

Интересно как такое реализовать, чтобы не переходить к гамбургеру на 1000px разрешения.
(вот пример)
607c546415382558420512.jpeg
Переходит в ====>
607c54ad3fec7252311191.jpeg
  • Вопрос задан
  • 75 просмотров
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
/**
 * Определяет размеры экрана
 */
$.screenSize = function () {
	var size = $(window).data('screen-size');
	if (!size) {
		size = 'xs';
		var bodyWidth = $(window).width();
		if (bodyWidth >= 576) {
			size = 'sm';
		}
		if (bodyWidth >= 768) {
			size = 'md';
		}
		if (bodyWidth >= 992) {
			size = 'lg';
		}
		if (bodyWidth >= 1200) {
			size = 'xl';
		}
		$(window).data('screen-size', size);
	};
	return size;
}
/**
 * Скрыть элементы при переполнении
 */
if ($.screenSize() != 'xs' || $.screenSize() != 'sm') {
    $('.hide-overflow-md').each(function () {
        var $container = $(this);
            containerWidth = $(this).innerWidth(),
            childrensWidth = 0;
        $container.children().each(function () {
            childrensWidth += $(this).outerWidth(true);
            if (childrensWidth > containerWidth) {
                $(this).addClass('d-none').nextAll().addClass('d-none');
                return false;
            }
        });
    });
}

/**
 * Скрыть пункты меню категорий при переполнении
 */
var $more = $('.nav-item-more').show(),
    $menu = $('> .dropdown-menu', $more),
    $nav = $more.parents('.navbar-nav'),
    $navItems = $('> .nav-item:not(.nav-item-more)', $nav),
    navWidth = $nav.innerWidth(),
    moreWidth = $more.outerWidth(true),
    navItemsWidth = 0;
$more.hide();
$navItems.each(function () {
    var $item = $(this),
        itemWidth = $item.outerWidth(true);
    if ((navItemsWidth + itemWidth + moreWidth) >= navWidth) {
        $menu.append($item.prev('.nav-item').prev('.nav-item').nextAll('.nav-item:not(.nav-item-more)'));
        $('.nav-item', $menu).removeClass('nav-item');
        $('.nav-link', $menu).removeClass('nav-link no-caret').addClass('dropdown-item');
        $('.dropdown-menu', $menu).addClass('dropdown-menu-right');
        $more.show();
        return false;
    } else {
        navItemsWidth += itemWidth;
    }
});

/**
 * Многоуровневое меню.
 */
$('body').on('click', '.dropdown-menu .dropdown-toggle', function (event) {
    var $toggle = $(this),
        togglePosition = $toggle.position(),
        $dropdown = $toggle.parent('.dropdown'),
        $menu = $dropdown.find('> .dropdown-menu');
    if (!$menu.hasClass('show')) {
        $dropdown.parents('.dropdown-menu').find('.show').removeClass('show');
    }
    $menu.toggleClass('show');
    $dropdown.toggleClass('show');
    if (!$dropdown.hasClass('nav-item')) {
        if ($menu.hasClass('dropdown-menu-right')) {
            $menu.css({top: togglePosition.top, right: $dropdown.outerWidth(true), left: 0});
        } else {
            $menu.css({top: togglePosition.top, left: $dropdown.outerWidth(true)});
        }
    }
    event.preventDefault();
    event.stopPropagation();
});
$('body').on('hidden.bs.dropdown', '.dropdown', function () {
    $(this).find('.show').removeClass('show');
});
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Вам нужны медиа запросы CSS

css
.menuWidthOver1000 {
  display: block; // grid, flex, etc.
}
.menuWidthLess1000 {
  display: none;
}

@media ( max-device-width: 999 ){
  .menuWidthLess1000 {
    display: block; // grid, flex, etc.
  }
  .menuWidthOver1000 {
    display: none;
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы