在导航栏崩溃后禁用悬停效果
我有一个具有下拉菜单按钮的引导栏,当它们悬停时会自动下拉。但是,当菜单被折叠时(按768px),我想禁用这种悬停效果,所以只有当按钮被点击时,菜单才会下降。在导航栏崩溃后禁用悬停效果
我试过一些没有用的东西。现在我试图使用媒体查询来禁用悬停效果,但我不知道如何继续。任何意见将不胜感激!编辑:我正在使用的代码。如果您单击显示屏右上方的移动图标,则可以看到在折叠菜单时酒吧的反应情况。
我相信你所需要做的就是将你的悬停规则设置为只能在767px以上工作,那么移动导航栏将按默认规则操作。
查看工作示例。
- 有一件事我已经添加了一个自定义类的
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>
非常感谢。这个解决方案非常合理。像魅力一样工作! – fyodorfranz
不客气,很高兴我能帮到你! – vanburen
您可以在媒体查询更改显示的值该规则,不知道什么是你想要的,但可能inline
或inline-block
(或none
如果你不想让.dropdown-menu
在所有显示) :
@media (max-width: 767px)
{
.dropdown:hover .dropdown-menu {
display: none;
}
}
有是没有这样的事“禁用”的规则的属性,但是,您可以将其更改为另一个值,因为我在这里所示的例子。
感谢您的想法。不幸的是,无论内联还是内联块禁用悬停时的自动下拉行为。 – fyodorfranz
刚编辑加入'none'。也许这就是你需要的。 – taxicala
刚刚给了它,但结果很糟糕;当点击按钮显示菜单时,菜单反复闪烁。我假设它正在激活显示器:无论何时鼠标悬停在菜单上。 – fyodorfranz
你基本上试图阻止悬停动作并返回到单击事件一旦媒体查询击中768px?目前还不清楚“放大”是指什么。 – vanburen
是的,这就是我想要做的。对不起,不清楚。我会编辑我的问题。 – fyodorfranz