使用基础顶部栏的响应式导航栏 class

Question

使用 zurb-foundation top-bar framework.I 根据屏幕尺寸切换汉堡菜单和大尺寸菜单时出现问题 framework.I 无论屏幕尺寸如何，两个顶部栏都在另一个下方。

我曾尝试重新安排加载 java 脚本文件的顺序，但没有成功。我已经阅读文档一百万遍了，就是找不到问题所在。我什至注释掉了我的整个顶部栏，然后复制并粘贴了基础网站上的那个，它做了同样的事情。

我认为可能是问题所在： -由于 zurb-foundation 文档中的确切代码发生了类似的事情，我想知道这是否是我在我的 functions.php 文件中为 WordPress 排队我的脚本的顺序，一些新的眼睛将不胜感激.

<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

对于基础版本 6.5.3，您可以根据屏幕大小使用 class 到 hide/show，(show-for-medium、show-for-small-only)。您的标记可以这样更改

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

使用基础顶部栏的响应式导航栏 class

Responsive nav bar using foundation's top-bar class

javascript

php

wordpress

zurb-foundation

从 functions.php

我想要的功能：

到目前为止的功能：