используйте выпадающее меню вместо меню гамбургера в навигационной панели в Bootstrap 4 - PullRequest
Новая
       18

используйте выпадающее меню вместо меню гамбургера в навигационной панели в Bootstrap 4

0 голосов
/ 08 ноября 2019

Я новичок в Bootstrap.

В Bootstrap 4 я хотел бы использовать простой стандартный Navbar: 

<nav class="navbar navbar-expand-lg navbar-light bg-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </nav>

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

Как заменить значок гамбургера и функциональность меню на элемент раскрывающегося списка?

Если это будет трудно или невозможно, я также мог бы использовать простые базовыеNav 

<ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>

  </ul>

, который заменяется раскрывающимся элементом в меньших окнах просмотра.

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

Самый простой способ - использовать отображение d-lg-none в раскрывающемся меню, но вам необходимо иметь дубликаты меню для каждой "версии" ...

Опция 1

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="dropdown d-lg-none">
        <div class="dropdown-menu show" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" href="#">Home</a>
            <a class="dropdown-item" href="#">Features</a>
            <a class="dropdown-item" href="#">Pricing</a>
        </div>
    </div>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> 
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
    </div>
</nav>

Демо: https://www.codeply.com/p/xohg1kOKji

Вариант 2

Используйте выпадающий список вместо мобильной навигации. ..

Демо: https://www.codeply.com/p/y9DBBlGlZO

0 голосов
/ 08 ноября 2019

<span class="navbar-toggler-icon"></span>
Этот код предназначен для отображения значка. Поскольку начальная загрузка 4 не имеет значков, используйте потрясающие значки.


Включите это в блок головы
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

и замените приведенную выше строку на
<span><i class="fa fa-angle-down" style="font-size:24px"></i></span>

...