Question

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

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

这是我想在手机上实现的目标：

enter image description here

这个JS小提琴：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

Answer 2

将此添加到您的css：

nav.show-for-small .right li { float: left; }
nav.show-for-small .small-6 { width: auto; }

.top-bar-section li:not(.has-form) a:not(.button) {
    padding: 0 30px 0 15px;
    line-height: 45px;
}
.top-bar-section .has-dropdown > a:after {
    border: inset 5px;
    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
    border-top-style: solid;
    margin-top: -2.5px;
}

这是小提琴http://jsfiddle.net/4gp2hojw/

Foundation 5 topbar - 在移动设备上禁用JS菜单崩溃

2 个答案: