Группировать элементы в раскрывающемся меню, когда они свернуты - PullRequest
Новая
       70

Группировать элементы в раскрывающемся меню, когда они свернуты

1 голос
/ 24 сентября 2019

Я только что нашел этот тип сворачивания навигационной панели с сайта, все пункты меню сгруппированы в раскрывающемся меню и расположены справа, он отличается от обычного загрузочного коллапса navbar

Извините, что не хватает репутации для публикации изображения

https://i.imgur.com/EFzI7hl.png

https://i.imgur.com/DhS4BlZ.png

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

https://i.imgur.com/s5O7cSD.png

Мой код 

<nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #0d47a1;">
        <a class="navbar-brand" href="/dashboard/">
            <img src="/images/logo.webp" width="40" height="40" alt="">
        </a>

        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Shop Manager</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Customer Care</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Messenger Order</a>
                </li>
            </ul>
        </div>
</nav>

1 Ответ

0 голосов
/ 24 сентября 2019

Вам нужно будет добавить немного пользовательского css, чтобы меню было меньше полной ширины: 

.navbar-collapse {
  position: absolute;
  right: 0;
  top: 40px;
  background-color: #333;
}

@media (min-width: 768px) {
  .navbar-collapse {
    background-color: transparent;
    position: initial; /* Using 'initial' here rather than specificing 'relative'.*/
  }
}

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

...