引导区悬停水平子导航

Bootstrap Hover Horizontal Subnav

本文关键字：导航 水平 悬停 导区      更新时间：2023-09-26

我正在使用Bootstrap创建一个带有水平子菜单的下拉选项的菜单，我希望在悬停而不是单击时显示子菜单，但我在这方面遇到了困难。我为其创建网站的人要求我不要使用选项卡或药丸，并保持这种外观和当前功能。

我试着看了其他关于如何在悬停时使用下拉菜单的指南，但它们都是垂直的sub-v，我也试着让它们在水平的sub/v中使用，但我仍然做不到。

这不那么重要，但我该如何减少下拉菜单的可点击区域，以便您必须点击单词，但仍保持菜单的间距。还有没有一种方法可以修复动画，这样当我直接从下拉菜单1切换到下拉菜单2时，或者反之亦然，原始菜单不会被按下然后消失？如果最坏的情况出现，我会禁用动画，但我想我会问是否有解决方案。

以下是我的代码的Bootply链接：http://www.bootply.com/zP99qlIYPP

提前感谢您！

这应该可以。

$('#topmenu').parent().css({'position': 'relative'});
$('#topmenu .dropdown').hover(
    function () {
        hoverMe($(this));
    },
    function () {
        hoverMeNot($(this));
    }
);
function hoverMe(el) {
    var target = el.find('a').eq(0).attr('data-target');
    el.append($(target).addClass('out'));
}
function hoverMeNot(el) {
    var target = el.find('a').eq(0).attr('data-target');
    el.css({'pointer-events': 'none'});
    if ($(target).parent().find(target + ":hover").length > 0) {
        $(target).bind('mouseleave', function (e) {
            hoverMeNot(el);
        });
    }
    else {
        $(target).appendTo($('#submenu')).removeClass('out');
        el.css({'pointer-events': 'auto'});
    }
}
.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
    color: #969590;
}
.navbar {
    margin-bottom: 0;
    border-radius: 0;
    min-height: 32px !important
}
.navbar-xs {
    margin-bottom: 0;
}
ul {
    margin: 0;
}
.nav > li.dropdown:hover {
    position: static;
    overflow: visible;
}
.dropdown .nav {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: calc(100% - 1px);
    z-index: 2;
}
@media (min-width: 768px) {
    .collapse.out {
        display: block;
    }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <nav class="navbar-xs" role="navigation" id="topmenu">
        <ul class="nav nav-justified">
            <li class="active"><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#test1">Dropdown 1</a>
            </li>
            <li class="dropdown">
                <a href="#" data-toggle="collapse" data-target="#test2">Dropdown 2</a>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>
<div>
    <nav class="navbar" role="navigation" id="submenu">
        <ul class="nav nav-justified collapse" id="test1">
            <li><a href="#" id="">Foo</a></li>
            <li><a href="#" id="">Bar</a></li>
            <li><a href="#" id="">Apples</a></li>
            <li><a href="#" id="">Oranges</a></li>
        </ul>
        <ul class="nav nav-justified collapse" id="test2">
            <li><a href="#" id="">Hello</a></li>
            <li><a href="#" id="">World</a></li>
            <li><a href="#" id="">Testing</a></li>
            <li><a href="#" id="">Experimenting</a></li>
        </ul>
    </nav>
</div>

相关文章：