Блог

Главная - Вопросы по программированию - Выпадающий список Bootstrap 4 с возможностью кликабельности / наведения навигационной панели

Выпадающий список Bootstrap 4 с возможностью кликабельности / наведения навигационной панели

#twitter-bootstrap #bootstrap-4

#twitter-bootstrap #bootstrap-4

Вопрос:

Несколько недель назад я пытался найти решение для использования выпадающего списка навигационной панели bootstrap 4 с / — на небольших устройствах. С помощью здесь все было улажено. Но у меня возникла небольшая проблема.
У каждой ссылки в верхней части навигации должна быть своя страница. Итак, ниже у меня есть «О нас». На полноразмерном экране я хочу открыть поднавигацию «при наведении курсора мыши» и при нажатии на «О нас» получить страницу «О нас». На маленьких экранах я хочу, чтобы и — отображались в конце «О нас», и когда вы нажимаете на , должна открываться поднавигация, но когда вы нажимаете на «О нас», тогда должна отображаться страница «О нас».
Я заметил, что если я добавлю ссылку href в раздел «О нас», то это будет проигнорировано. Похоже, что он игнорируется из-за переключения данных в <a> теге. Если я удалю его, то он заработает, но, очевидно, теперь щелчок по плюсу не открывает поднавигацию, вместо этого он переходит к «О нас», что имеет смысл, потому что плюс является частью тега a.

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

 .dropdown-toggle[data-toggle="dropdown"]:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "f067";
}

.show > .dropdown-toggle[data-toggle="dropdown"]:after {
  content: "f068";
}
.dropdown-toggle[data-toggle="dropdown"] {
  display: flex;
}
.dropdown-toggle[data-toggle="dropdown"]:after {
  border: none;
}

/* 
 * I inflated [data-toggle]'s specificity by adding .dropdown-toggle to it as for 
 * some reason SO is loading bootstrap.min.css after the custom CSS
 * but you can use the CSS I posted in the answer if it's loaded after bootstrap.css
 * see it here: https://jsfiddle.net/websiter/wy46msvh/
 */  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<!-- Navbar Top -->
<nav class="navbar navbar-expand-md navbar-custom navbar-light">
  <div class="container justify-content-between">

    <!-- Toggler/collapsibe Button Menu -->
    <button class="navbar-toggler  mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
    <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Navbar links -->
    <div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
      <ul class="navbar-nav">
        <!-- Link -->
        <li class="nav-item">
          <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>

        <!-- Dropdown About Us-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href id="navbardrop" data-toggle="dropdown">
            <i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About  
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

Ответ №1:

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

  • Я предлагаю поместить ссылку «О нас» в подменю, а не помещать «href» в главное меню. Проверьте фрагмент.

 .dropdown-toggle[data-toggle="dropdown"]:after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "f067";
            }

            .show > .dropdown-toggle[data-toggle="dropdown"]:after {
            content: "f068";
            }
            .dropdown-toggle[data-toggle="dropdown"] {
            display: flex;
            }
            .dropdown-toggle[data-toggle="dropdown"]:after {
            border: none;
            }

            .dropdown-toggle[data-toggle="dropdown"]:after {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "";
            }

            .show > .dropdown-toggle[data-toggle="dropdown"]:after {
                content: "";
            }

            .dropdown-menu.show {
                display: none !important;
            }

            li.nav-item.dropdown:hover > div.dropdown-menu {
                display: block !important;
            }

            @media only screen and (max-width: 600px) {
                .dropdown-toggle[data-toggle="dropdown"]:after {
                    border: none;
                }
                .dropdown-toggle[data-toggle="dropdown"]:after {
                    font-family: "Font Awesome 5 Free";
                    font-weight: 900;
                    content: "f067";
                }
                .dropdown-toggle::after {
                    display: inline-block;
                    margin-left: .255em;
                    vertical-align: .255em;
                    content: "";
                    border-top: .3em solid;
                    border-right: .3em solid transparent;
                    border-bottom: 0;
                    border-left: .3em solid transparent;
                }

                li.nav-item.dropdown:hover > div.dropdown-menu {
                    visibility: hidden;
                }

                .dropdown-menu.show {
                    display: block !important;
                    visibility: visible !important;
                }

                .show > .dropdown-toggle[data-toggle="dropdown"]:after {
                    content: "f068"
                }
            }  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
        <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

        <!-- Navbar Top -->
        <nav class="navbar navbar-expand-md navbar-custom navbar-light">
            <div class="container justify-content-between">

                <!-- Toggler/collapsibe Button Menu -->
                <button class="navbar-toggler  mr-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbarMenu">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Navbar links -->
                <div class="collapse navbar-collapse" id="collapsibleNavbarMenu">
                    <ul class="navbar-nav">
                        <!-- Link -->
                        <li class="nav-item">
                            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                        </li>

                        <!-- Dropdown About Us-->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
                                <i class="fab fa-jenkins d-lg-none d-xl-none" aria-hidden="true"></i> About
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">About Us</a>
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

Комментарии:

1. Всем привет, спасибо за ваш совет. Я попробовал это, но заметил, что когда я нажимаю на знак плюса, значок «Об открытии», когда я нажимаю на минус «О Subnavi», исчезает, но он все еще расширен и закрывается только тогда, когда я перехожу к другой основной точке навигации. Я также не уверен, что мне нравится дважды указывать в этом меню… Возможно ли это для работы?

2. добавляю дважды о меню o — я думаю, что это нормально. Поскольку главное меню «О нас» является выпадающим, наличие другой ссылки на страницу «О нас» во вспомогательной навигации допустимо. Subnavi исчезает, но он все еще расширен — не могли бы вы объяснить это немного подробнее? (Извините за это, я не понял, что именно происходит) Когда я нажимаю минус, subnav закрывается.