javascript - Foundation 5 topbar - 在移动设备上禁用 JS 菜单折叠

Question

是否可以禁用顶部栏在移动设备上折叠的默认行为？我有一个左手菜单和右手菜单。我想让右侧菜单在所有屏幕尺寸上都完全相同，并且不希望它在手机/平板电脑上折叠。

所以桌面版在左侧有几个菜单项，在右侧显示三个图标，每个图标都有一个下拉菜单。我希望右侧菜单在手机上看起来完全一样，左侧菜单会正常折叠。

这是我想在移动设备上实现的:

还有这个 JS fiddle :http://jsfiddle.net/z9d6jh8n/向您展示我有多接近。

几周来我一直在努力解决这个问题。谁能帮忙？

原代码:

<nav class="top-bar" data-topbar >
        <ul class="title-area">
            <!-- Title Area -->
            <li class="name">&nbsp;</li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>
        <section class="top-bar-section">
            <!-- main nav section -->
            <ul class="left">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
                <li class="has-dropdown"><a href="#">Links</a>
                    <ul class="dropdown">
                        <li><a href="#" class="">Dropdown Level 1</a></li>
                        <li><a href="#">Dropdown Option</a></li>
                        <li><a href="#">Dropdown Option</a></li>
                    </ul>
                </li>
            </ul>
            <!--Language, account, currency section-->
            <ul class="right">
                <li class="has-dropdown" id="account">
                    <a href="#" class="top-bar-colour1"><i class="fi-en"></i></a>
                    <ul class="dropdown"><li><a href="#">Languages</a></li></ul> 
                </li>
                <li class="has-dropdown" id="basket">
                    <a href="#" class="top-bar-colour2"><i class="fi-dollar"></i></a>
                    <ul class="dropdown"><li><a href="#">Currency</a></li></ul>
                </li>
                <li class="has-dropdown" id="currency">
                    <a href="#" class="top-bar-colour3"><i class="fi-lock medium"></i></a>
                    <ul class="dropdown"><li><a href="#">Login</a></li></ul>
                </li>
            </ul>
        </section>
    </nav>

Answer 1

首先添加以下CSS来覆盖foundation.css:

.top-bar-section ul {
    width: auto !important;
    height: auto !important;
    display: inline !important;
}

.row:before, .row:after {
    content: " " !important;
    display: table !important;
}

.top-bar-section ul li {
    float: left !important;
}

.top-bar-section .has-dropdown > a:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border: inset 5px;
    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
    border-top-style: solid;
    margin-top: -2.5px;
    top: 22.5px;
}

.top-bar-section .has-dropdown > a {
    padding-right: 35px !important;
}

.top-bar-section .right li .dropdown {
    left: auto !important;
    right: 0 !important;
}

.top-bar-section .dropdown {
    left: 0 !important;
    top: auto !important;
    background: transparent !important;
    min-width: 100% !important;
}

.top-bar-section li.active:not(.has-form) a:not(.button) {
    padding: 0 15px !important;
    line-height: 45px !important;
    color: white !important;
    background: #008cba !important;
}

.top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
    display: block !important;
    position: static !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    clip: auto !important;
    position: absolute !important;
}

然后您必须更改您的 HTML 标记。

在你的 FIDDLE 中你有一个 div.right。把它改成ul.right，放到ul.left里。

查看此 DEMO