Отзывчивая навигационная панель с использованием класса top-bar фонда - PullRequest
Новая
       7

Отзывчивая навигационная панель с использованием класса top-bar фонда

0 голосов
/ 23 мая 2019

Проблемы при переключении меню гамбургера и меню большого размера в зависимости от размеров экрана при использовании основы верхней панели zurb-foundation. Я получаю обе верхние панели одну под другой, независимо от размера экрана.

У меня естьпопытался изменить порядок, в котором я загружаю файлы сценариев Java для основания, но не повезло.Я прочитал документы миллион раз и просто не могу найти проблему.Я даже прокомментировал весь мой топ-бар, скопировал и вставил его с сайта фонда, и он сделал то же самое.

В чем, я думаю, может быть проблема: - поскольку подобное происходит с точным кодом из документов zurb-foundation, мне интересно, если это порядок, в котором я ставлю свои сценарии в очередь в своих функциях.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);

Функциональность, которую я хочу:

  • на маленьких экранах пользователь просматривает только меню гамбургеров
  • на экранах среднего и большего размера, пользователь не видит меню гамбургеров и имеет верхнюю панель правильного размера

Функциональность на данный момент:

  • функция переключения между полноразмерным меню и меню размера гамбургера не работает
  • Я получаю обе верхние панели одна под другой, независиморазмером экрана

1 Ответ

0 голосов
/ 23 мая 2019

для базовой версии 6.5.3 вы можете использовать класс, чтобы скрыть / показать в зависимости от размера экрана (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>
...