Зависание загрузчика Bootstrap Navbar проблема - PullRequest
Новая
       13

Зависание загрузчика Bootstrap Navbar проблема

0 голосов
/ 28 февраля 2019

Я хочу иметь зависшую навигационную панель, которая прекрасно работает, но я хочу придерживаться стиля сайта.Раскрывающийся список сайта находится на 20px ниже панели навигации, когда вы наводите курсор на панель навигации и переходите к раскрывающемуся меню, которое он скрывает.Это выглядит примерно так:

Вот и пример на codepen.io 

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

.dropdown-menu{
  margin-top:20px;
}

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Это невозможно только с помощью CSS.Вы также должны написать небольшой java-скрипт.Вы можете написать на событие фокуса и изменить CSS из выпадающего меню.Затем запишите событие щелчка из элемента меню, затем скройте.Таким образом, мы можем решить эту проблему.Если вам действительно нужно пространство между ссылкой меню и раскрывающимся списком, избегайте использования при наведении курсора.

0 голосов
/ 28 февраля 2019

Вы можете попробовать следующее решение, используя внутренний элемент <div> для перемещения пунктов меню вниз.Я также рекомендую использовать дополнительный класс для вашей настройки (в данном случае .custom-dropdown), чтобы вы могли изменить только пользовательский выпадающий список, а не все выпадающие элементы на вашей стороне. 

html, body {
  background: #ccc;
}
.custom-dropdown.dropdown:hover > .dropdown-menu {
  display: block;
  margin: 0;
  background: transparent;
}

.custom-dropdown.dropdown > .dropdown-toggle:active {
  /** without this, clicking will make it sticky. */
  pointer-events: none;
}

.custom-dropdown .dropdown-menu .inner-dropdown-menu {
  margin-top: 20px;
  padding: .5rem 0;
  background: white;
}
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="dropdown custom-dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
        <div class="dropdown-menu border-0" aria-labelledby="dropdownMenuButton">
          <div class="inner-dropdown-menu border rounded">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
0 голосов
/ 28 февраля 2019

Как насчет удаления свойства margin-top и превращения его в padding-top:20px;.Это позволило бы устранить пробел и сделать выпадающую панель более просторной.Я не знаю, если это то, что вы хотели, я не мог точно понять ваш вопрос

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...