У меня есть панель навигации начальной загрузки с кнопками раскрывающегося меню, которые автоматически раскрываются при наведении курсора. Однако, когда меню сворачивается (после нажатия 768 пикселей), я хочу отключить этот эффект наведения, чтобы меню опускалось только при нажатии кнопок.

Я попытался сделать несколько вещей, которые не сработали. Прямо сейчас я пытаюсь использовать медиа-запрос, чтобы отключить эффект наведения, но я не уверен, что делать дальше. Любые советы будут высоко ценится!

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

@media (max-width: 767px) 
{
    .navbar-fixed-top
    {
        position: relative;
        top: auto;
    }

 .dropdown:hover .dropdown-menu {
    /*disable the display:block; property*/
    }
}

РЕДАКТИРОВАТЬ: Вот пример кода, с которым я работаю. Если вы нажмете на значок мобильного телефона в правом верхнем углу дисплея, вы сможете увидеть, как полоса реагирует на сворачивание меню.

1
fyodorfranz 21 Окт 2015 в 23:26

2 ответа

Лучший ответ

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

См. Рабочий пример.

  • Единственное, что я добавил, - это специальный класс для navbar (navbar-custom в примере или что-то еще, что имеет смысл, если вы пойдете по этому маршруту), поэтому ядро ​​не перезаписывается напрямую. Это не нужно для того, чтобы все работало, это просто лучшая практика, которую я считаю.
@media (min-width: 767px) {
  .navbar-custom .dropdown:hover .dropdown-menu {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-custom navbar-fixed-top">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button> <a href="~/" class="navbar-brand title-link">Gateway Ranch</a>

  </div>
  <!-- Collection of nav links, forms, and other content for toggling -->
  <div id="navbarCollapse" class="collapse navbar-collapse centeredText">
    <ul class="nav navbar-nav centeredText">
      <li><a href="~/Home/Contact">Contact</a>

      </li>
      <li><a href="#">Profile</a>

      </li>
      <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="~/Horse/">Horses<b class="caret"></b></a>

        <ul role="menu" class="dropdown-menu">
          <li><a href="~/Horse/">For Sale</a>

          </li>
          <li><a href="#">Brood Mare</a>

          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
3
vanburen 21 Окт 2015 в 21:41

Вы можете изменить отображаемое значение в своем медиа-запросе для этого правила, не зная, какое именно оно вам нужно, но, вероятно, inline или inline-block (или none, если вы не хотите чтобы .dropdown-menu показать вообще):

@media (max-width: 767px) 
{
    .dropdown:hover .dropdown-menu {
        display: none;
    }
}

Не существует такой вещи, как «отключение» свойства правила, однако вы можете изменить его на другое значение, как в примере, который я показал здесь.

0
taxicala 21 Окт 2015 в 20:38