0

我的网站有基于 twitter 引导程序的大型下拉菜单。

我尝试向我的大型下拉项目添加一个选项卡式菜单，该菜单不是引导构建而是响应式的。

但是，它不适合那里，它包裹了整个切换。

这就是我添加全宽巨型下拉菜单的方式。

<li class="dropdown full-width"><a href="#" class="dropdown-toggle" data-toggle="dropdown">TEST<b
        class="icon-angle-down"></b></a>
</li>

在这里您可以查看演示页面

当您将鼠标悬停在导航栏“ILETISIM”上的项目上时，它会切换全宽，这正是我想要的。因为我是用 twitter bootstrap 构建的

在此处输入图像描述

但是，请检查项目“测试”。我后来添加的脚本不是 twitter bootstrap 构建的，而是响应式的，它打破了导航栏并使项目的li全宽，如下图所示。

在此处输入图像描述

直到现在我都找不到任何解决方案。

我想要的是，它的行为与“ILETISIM”项目的工作方式相同。

我将用新菜单替换该菜单。

4

1 回答 1

1

将 zozo 选项卡包装在一个 div 中，并像这样给它 100%：

<div class="tab-wrapper dropdown-menu">
 zozo tabs here....
</div>

问题的其余部分与 twitter 导航菜单有关。子菜单在 ul 内悬停时显示，并且您在 div 内添加了 zozo 选项卡。

/*hide by default*/
.tab-wrapper{
    display: none;
    width: 980px; 
    left: -492.5px;
}
/*display on hover sub menu*/
.navbar ul.nav li:hover > .tab-wrapper {
    display: block;
}

现在默认选项卡会出现一些问题，因为整个元素显示设置为无。

更新：添加了类选项卡包装器并替换了 css 样式。

更新 2 我意识到你的菜单是绝对定位的。因此，将相同的类添加到 div 下拉菜单中，这将使其绝对与您的风格无关，并添加更多风格。

更新 3 移动下拉菜单显示，因为它的元素或其容器被隐藏，不显示。我们在它可见后使用刷新方法。

    $(document).ready(function () {
         /*give your li id of test and it fire on mouseover to refresh the tabs*/
        $("#test").on("mouseover", function () {
            $("#tabbed-nav-02").data('zozoTabs').refresh();
        });
    });

您还可以将标签 zozo-tabs 和 zozo-ui 添加到您的 stackoverflow 帖子中吗？

于 2013-07-23T09:25:05.520 回答