Question

我需要帮助定制基础顶栏菜单。我有一个非常标准的顶栏设置左手菜单和右手菜单。

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

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

enter image description here

任何人都知道我从哪里开始？

    <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>

Foundation 5 top bar - 禁用右侧链接的移动视图中的默认行为

1 个答案: