如何为引导菜单启用悬停事件? [复制]
Posted
技术标签:
【中文标题】如何为引导菜单启用悬停事件? [复制]【英文标题】:How enable Hover event for bootstrap menus? [duplicate] 【发布时间】:2016-02-26 11:18:27 【问题描述】:我实现了一个引导响应的丰富菜单,它运行良好。 它适用于 Click 事件,我的问题是:如何将其更改为 Hover 事件? 所有引导菜单都有这个问题。 bootstrap 对此没有任何支持吗? 这是我使用的菜单: http://geedmo.github.io/yamm/ 我的问题解决了:
<style>
li.dropdown:hover .dropdown-menu
display: block;
li.dropdown:hover .dropdown-toggle
color: #555;
background-color: #e5e5e5;
</style>
但是出现了一个新问题,当我缩小浏览器时,子菜单显示在菜单的末尾,这是不合适的:/
【问题讨论】:
签出此***.com/questions/8878033/… 我搜索了所有的***,但我没有找到,非常感谢@HarshanaSamaranayaka 【参考方案1】:试试这个 html、JS 和 CSS
CSS
$(document).ready(function()
function navbarSubmenu(width)
if (width > 767)
$('.navbar-custom .navbar-nav > li.dropdown').hover(function()
var MenuLeftOffset = $('.dropdown-menu', $(this)).offset().left;
var Menu1LevelWidth = $('.dropdown-menu', $(this)).width();
if (width - MenuLeftOffset < Menu1LevelWidth * 2)
$(this).children('.dropdown-menu').addClass('leftauto');
else
$(this).children('.dropdown-menu').removeClass('leftauto');
if ($('.dropdown', $(this)).length > 0)
var Menu2LevelWidth = $('.dropdown-menu', $(this)).width();
if (width - MenuLeftOffset - Menu1LevelWidth < Menu2LevelWidth)
$(this).children('.dropdown-menu').addClass('left-side');
else
$(this).children('.dropdown-menu').removeClass('left-side');
);
);
.navbar-custom .dropdown-toggle:after
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@media (min-width: 768px)
.dropdown:hover .dropdown-menudisplay:block
.navbar-custom .open > .dropdown-menu
visibility: visible;
opacity: 1;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<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>
<nav class="navbar navbar-custom navbar-transparent navbar-fixed-top one-page" role="navigation">
<div class="navbar-collapse collapse in" id="custom-collapse" aria-expanded="true">
<ul class="nav navbar-nav navbar-right mnCh">
<li class="current">
<a href="/#" title="Home">Home</a>
</li>
<li class="link">
<a href="/#" title="About us">About us</a>
</li>
<li class="link dropdown">
<a href="/#" title="Collection" class="dropdown-toggle binded" data-toggle="dropdown">Collection</a>
<ul class="dropdown-menu">
<li><a href="/#">Collection 1</a></li>
<li><a href="/#">Collection 2</a></li>
<li><a href="/#">Collection 3</a></li>
<li><a href="/#">Collection 4</a></li>
</ul>
</li>
<li class="link">
<a href="/#" title="Store">Store</a>
</li>
<li class="link dropdown">
<a href="/#" title="Press & News" class="dropdown-toggle binded" data-toggle="dropdown">Press & News</a>
<ul class="dropdown-menu">
<li><a href="/#">Press</a></li>
<li><a href="/#">News</a></li>
</ul>
</li>
<li class="link">
<a href="/#" title="Download">Download</a>
</li>
<li class="dropdown">
<a href="/#" class="dropdown-toggle binded" data-toggle="dropdown">
Languages
</a>
<ul class="dropdown-menu">
<li><a href="/en">English</a></li>
<li><a href="/it">Italiano</a></li>
</ul>
</li>
</ul>
</div>
</nav>
【讨论】:
谢谢,这是一个很酷的菜单。我纠正了悬停,但子菜单显示在所有菜单的末尾,就像我发布的图片一样。我不知道如何修复它。 @MaGio css是移动视图的媒体查询,js替换了bootstrap submenu css选项。我已经测试过了,里面打开了子菜单。【参考方案2】:将此样式添加到您的页面。
<style>
li.dropdown:hover .dropdown-menudisplay:block
li.dropdown:hover .dropdown-togglecolor:#555; background-color:#e5e5e5
</style>
第一个将在鼠标悬停时启用下拉菜单,第二个将更改菜单标题颜色(为您的页面选择合适的颜色)。
【讨论】:
非常感谢,它运行良好:) @svjn 它工作正常,非常感谢,但是,对不起,当我缩小浏览器时,子菜单显示在菜单末尾,你能再帮我解决一下吗? @svjn以上是关于如何为引导菜单启用悬停事件? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
如何制作悬停效果而不是单击引导程序 4 下拉菜单? [复制]
CSS/JQuery:如何为表格行创建子菜单,使鼠标从行到菜单保持可见?