Добавление выпадающего в PHP Navbar - PullRequest
Новая
       7

Добавление выпадающего в PHP Navbar

0 голосов
/ 13 апреля 2020

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

Вот мой header.in c. php code: 

    <header class="flex-shrink-0 flex-grow-0">
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-ewarz sticky-top h-100 p-0">
        <section class="container-fluid">
            <!-- Nav Brand Text -->
            <a class="navbar-brand d-none d-lg-block" style="font-size: 24pt; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;" href="#">e<span style="color: #aa3232">W</span>arz</a>
        <!-- Burgermenu Toggler -->
        <button class="navbar-toggler ml-auto mr-2 collapsed" style="margin: 15px;" data-toggle="collapse" data-target="#navMenu" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse bg-ewarz" id="navMenu">
                <!-- Nav Links -->
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-account-multiple mr-2"></i>Crew</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-cart mr-2"></i>Shop</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-text-box-outline mr-2"></i>General<i class="mdi mdi-menu-down"></i></a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="#"><i class="mdi mdi-information-outline mr-2"></i>About<i class="mdi mdi-menu-down"></i></a>
                    </li>
                </ul>
            </div>
        <!-- Nav Icons -->
        <section class="d-none d-lg-block d-lg-inline-flex">
            <a href="#"><i class="icon mdi mdi-discord d-block mr-1"></i></a>
            <a href="#"><i class="icon mdi mdi-steam d-block ml-1"></i></a>
        </section>
        </section>
    </nav>
</header>

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Выпадающие меню в Navbar должны быть определены таким образом. 

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown Heading
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Dropdown Item 1</a>
      <a class="dropdown-item" href="#">Dropdown Item 2</a>
      <a class="dropdown-item" href="#">Dropdown Item 3</a>
    </div>
</li>

Пример кода, показанного ниже: 

    <!-- Nav Links -->
    <ul class="navbar-nav mx-auto">
        <li class="nav-item mx-3">
            <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
        </li>
        <li class="nav-item mx-3">
            <a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
        </li>

        <!-- Add this block -->
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown Menu Text
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Dropdown Item 1</a>
                <a class="dropdown-item" href="#">Dropdown Item 2</a>
            </div>
        </li>
        <!-- Add this block -->
    </ul>

Ссылка ссылка для деталей

0 голосов
/ 14 апреля 2020

Вы можете добавить снова <ul><li> после <ul><li>.

Вы можете использовать это для выпадающего списка; 

  <ul class="navbar-nav mx-auto">
          <li class="nav-item mx-3">
              <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
              <ul class="navbar-nav mx-auto">
                  <li class="nav-item mx-3">
                     <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home2</a>
                  </li>
                  <li class="nav-item mx-3">
                     <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home3</a>
                  </li>
                  <li class="nav-item mx-3">
                     <a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home4</a>
                  </li>
              </ul>
          </li>
  </ul>
...