Как скрыть navbar при клике на пункт меню?

266

11 ноября 2018, 13:40

Как закрывать меню Bootstrap при нажатии на любой пункт меню в мобильной версии?

    <div class="nav-side-menu">
        <div class="brand mb-0 py-2 py-xl-4 py-lg-4 py-md-4">
            <div class="d-none d-xl-block" style="text-transform: uppercase;">
                <a href="#main"><span style="font-size: 11px;">Brand</span></a>
            </div>
        </div>
        <i class="navbar-toggler-icon toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
        <div class="menu-list collapse">
            <ul class="menu-content out text-center m-0 navbar-nav" id="menu-content">
                <li><a href="#index" data-toggle="collapse" class="selected">Главная</a></li>
                <li><a href="#shops" data-toggle="collapse" class="selected">Магазины</a></li>
            </ul>
        </div>
    </div>

Answer 1

Если я правильно понял Ваш вопрос, то ниже немного изменённый код, который при нажатии на любой из пунктов меню скрывает всё меню.

<div class="nav-side-menu">
    <div class="brand mb-0 py-2 py-xl-4 py-lg-4 py-md-4">
        <div class="d-none d-xl-block" style="text-transform: uppercase;">
            <a href="#main"><span style="font-size: 11px;">Brand</span></a>
        </div>
    </div>
    <i class="navbar-toggler-icon toggle-btn" data-toggle="collapse" data-target="#menu"></i>
    <div class="menu-list collapse" id="menu">
        <ul class="out text-center m-0 navbar-nav">
            <li><a href="#index" data-toggle="collapse" class="selected" data-target="#menu">Главная</a></li>
            <li><a href="#shops" data-toggle="collapse" class="selected" data-target="#menu">Магазины</a></li>
        </ul>
    </div>
</div>

Что касается мобильной версии, то я бы предложил способ использовать @media CSS. Когда пользователь заходит с телефона или другого мобильного устройства, то ему показывается "бургер" со скрытым меню. При клике на который открываются пункты с тем функционалом который необходим Вам (код выше).