jquery - Foundation 5 顶部栏 - 禁用移动 View 中右侧链接的默认行为

Question

我需要帮助自定义基础顶部栏菜单。我有一个非常标准的顶部栏，设置了一个左侧菜单和一个右侧菜单。

移动设备上的默认基础行为是将左右菜单合并为一个下拉菜单，右侧有一个菜单图标。

我想以某种方式更改此行为，以便左右菜单分开。我希望左侧菜单使用默认行为，但我需要将菜单图标移到左侧。我想禁用右侧菜单的默认行为，以便它们在所有屏幕尺寸上保持相同。下面是我想要实现的图像。

有人知道我该从哪里开始吗？

    <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

LIVE DEMO

<div class="off-canvas-wrap">
    <div class="inner-wrap">
        <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </aside>
        <nav class="tab-bar show-for-small">

            <section class="top-bar-section">                        <!-- main nav section Left Nav Section--> 
                    <ul class="left">
                        <div class="right small-6">
                            <ul class="row">
                                <li class="has-dropdown not-click small-4 columns" id="account">
                                    <a href="#" class="top-bar-colour1"><i class="fi-en">icon</i></a>
                                    <ul class="dropdown">
                                        <li class="active"><a href="#">Languages</a></li> 
                                    </ul> 
                                </li>
                                <li class="has-dropdown not-click small-4 columns" id="basket">
                                    <a href="#" class="top-bar-colour2"><i class="fi-dollar">icon</i></a>
                                    <ul class="dropdown not-click">
                                        <li class="active"><a href="#">Currency</a></li>
                                    </ul>
                                </li>
                                <li class="has-dropdown not-click small-4 columns" id="currency">
                                    <a href="#" class="top-bar-colour3"><i class="fi-lock medium">icon</i></a>
                                    <ul class="dropdown">
                                        <li  class="active"><a href="#">Login</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <a class="left-off-canvas-toggle menu-icon">
                            <span></span>
                        </a>
                    </ul>   
                </section>
        </nav>

        <div class="contain-to-grid fixed">
            <nav class="top-bar hide-for-small" data-topbar>
                <section class="top-bar-section">
                    <ul class="title-area left">
                        <li class="name hide-for-small">
                            <a></a>
                        </li>
                    </ul>

                    <!-- main nav section Left Nav Section-->
                    <ul class="left">
                        <li class="active"><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 not-click">
                            <a href="#">Links</a>
                            <ul class="dropdown">
                                <li class="active"><a href="#">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 Right Nav Section-->
                    <ul class="right">
                        <li class="has-dropdown not-click" id="account">
                            <a href="#" class="top-bar-colour1"><i class="fi-en">icon</i></a>
                            <ul class="dropdown">
                                <li class="active"><a href="#">Languages</a></li> 
                            </ul> 
                        </li>
                        <li class="has-dropdown not-click" id="basket">
                            <a href="#" class="top-bar-colour2"><i class="fi-dollar">icon</i></a>
                            <ul class="dropdown not-click">
                                <li class="active"><a href="#">Currency</a></li>
                            </ul>
                        </li>
                        <li class="has-dropdown not-click" id="currency">
                            <a href="#" class="top-bar-colour3"><i class="fi-lock medium">icon</i></a>
                            <ul class="dropdown">
                                <li  class="active"><a href="#">Login</a></li>
                            </ul>
                        </li>
                    </ul>
                </section>
            </nav>
        </div> <a class="exit-off-canvas" href="#"></a>
        <article class="small-12 columns">
            <main>
            </main>
        </article>
        <footer class="small-12 columns">

        </footer>
    </div>
</div>