使用Foundation的Top-Bar类的自适应导航栏

Question

使用zurb-foundation顶部栏框架根据屏幕尺寸切换汉堡菜单和大尺寸菜单时遇到麻烦。无论屏幕尺寸如何，我都将两个顶部栏都放在另一个下方。

我尝试重新排列为基础加载Java脚本文件的顺序，但是没有运气。 我已经阅读了100万遍文档，却找不到问题。我什至注释掉了我的整个顶部栏，并从基础站点复制并粘贴了该顶部栏，它也做了同样的事情。

我认为可能是问题所在： -由于zurb-foundation文档中的确切代码发生了类似的事情，我想知道这是否是我在WordPress的functions.php文件中排队脚本的顺序，请多多关注。< / p>

<div class="title-bar" data-responsive-toggle="responsive_menu" data-hide- 
    for="large">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title"></div>
</div>


<div class="top-bar" id="responsive_menu">
    <div class="top-bar-left">
        <ul class="medium-horizontal menu">
            <li class="menu-text">Save on Experiences</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="medium-horizontal menu">
            <li><a href="#">Featured Discounts</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">News</a></li>
        </ul>
    </div>

</div>

从functions.php中截取

  

wp_enqueue_style（'layout'，get_template_directory_uri（）。'/assets/css/foundation.min.css'）;   wp_enqueue_script（'foundation-script-min'，get_template_directory_uri（）。'/assets/js/vendor/foundation.min.js'，''，''，true）;   wp_enqueue_script（'foundation-script-jquery'，get_template_directory_uri（）。'/assets/js/vendor/jquery.js'，''，``，true）;   wp_enqueue_script（'foundation-script-whatinput'，get_template_directory_uri（）。'/assets/js/vendor/what-input.js'，''，``，true）;

我想要的功能：

• 在小屏幕上，用户仅查看汉堡菜单
• 在中型和大型屏幕上，用户看不到汉堡菜单，并在顶部显示了适当的尺寸

到目前为止的功能：

• 原尺寸和汉堡尺寸菜单之间的切换功能不起作用
• 无论屏幕大小如何，我都将两个顶部的条形图放在另一个条形图上

Answer 1

对于Foundation版本6.5.3，您可以使用class根据屏幕大小隐藏/显示（中等显示，仅小型显示）。您的标记可以这样更改

<div class="title-bar show-for-small-only" data-responsive-toggle="responsive_menu" data-hide- 
    for="large">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title"></div>

<div class="top-bar show-for-medium" id="responsive_menu">
    <div class="top-bar-left">
        <ul class="medium-horizontal menu">
            <li class="menu-text">Save on Experiences</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="medium-horizontal menu">
            <li><a href="#">Featured Discounts</a></li>
            <li><a href="#">Experiences</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">News</a></li>
        </ul>
    </div>

</div>