Как закрыть меню верхней панели Foundation при нажатии на ссылку?

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

В настоящее время при нажатии на ссылку страница прокручивается, но меню остается открытым в верхней части страницы вне поля зрения.

в предыдущей версии Foundation я смог перепроектировать код и найти простое решение. С обновление до 4.3.1 чтобы исправить другую проблему с верхней панелью, я не могу найти решение из-за моих ограниченных знаний javascript.

верхней панели

Мне кажется, что если бы я мог запустить событие или функцию для закрытия меню при нажатии ссылки в меню, это было бы исправлено. Ранее я поместил свой код, который произошел по ссылке, нажмите на строку 261.

когда мобильное меню закрывается, .исправлено добавляется к div, окружающему верхнюю панель, в то время как .расширен и .исправлены удаляются из .верхней панели разд.

6
css html javascript zurb-foundation

6 ответов

вы можете попробовать добавить jQuery, чтобы свернуть меню при нажатии на ссылку.

Вы можете добавить код, завернутый внутри элемента script. Поместите его после всех ваших html-элементов (внутри элемента body). Вы также можете поместить его в отдельный файл javascript, который вы можете использовать, как и любой другой файл javascript. Убедитесь, что вы поместили эту ссылку после ссылки jquery.

сам код может быть довольно простым, так как похоже, что foundation добавляет класс под названием "expanded" в панель навигации при включении и выключении значка меню. Так что вы можете просто удалить "расширенный" класс, когда кто-то нажимает на ваши кнопки.

вот как это должно выглядеть:

jQuery(document).ready(function($) {
    $('.top-bar ul.right(or .left depending how you arranged your buttons) li').click(function() {
       $('.top-bar').removeClass('expanded');
    });
}(jQuery));

селектор '.top-bar ul.право или. слева в зависимости от того, как вы расположили свои кнопки) li' можно вызвать с идентификатором также, если вы дадите своему меню (элемент ul) уникальный идентификатор. В этом случае это будет:

jQuery(document).ready(function($) {
    $('#myMenuId li').click(function() { 
        $('.top-bar').removeClass('expanded'); 
    });
}(jQuery));

надеюсь, что это поможет.

5

попробуй:

$('#main-menu li').click(function() {
    $('.toggle-topbar').trigger('click');
});
3

Я впервые работаю с Foundation 6, и я столкнулся с этим сообщением, пытаясь выяснить, как закрыть новое меню верхней панели на мобильном телефоне, когда была нажата ссылка. Я хотел прокомментировать свое решение на случай, если кто-то еще работает над Foundation 6, столкнется с этим сообщением, так как это было хорошим началом для меня.

вот что я сделал:

настройка навигации-горизонтальная навигация на средних и больших точках останова, адаптивный переключатель вертикальной навигации на малых точка останова

                <!--  Mobile responsive toggle (hamburger menu) -->
                <div class="title-bar" data-responsive-toggle="siteNav" data-hide-for="medium">
                    <button class="menu-icon" type="button" data-toggle></button>
                    <div class="title-bar-title">Menu</div>
                </div>

                <!-- Nav items -->
                <div id="siteNav" class="top-bar"> 
                    <p><ul class="vertical medium-horizontal menu text-center">
                        <li ><a href="#home" onClick="">HOME</a></li>
                        <li ><a href="#services">SERVICES</a></li>
                        <li ><a href="#contact">CONTACT</a></li>
                    </ul></p>
                </div>

затем я добавил модифицированную версию jquery на основе предыдущих решений в этом посте (благодаря amazingBastard и Cerbrus):

$(document).ready(function($) {
        $('#siteNav li').click(function() { 
            if(Foundation.MediaQuery.current == 'small'){
                $('#siteNav').css('display', 'none'); 
            }
        });
    });

В Foundation 6 селектор css "display" добавляется в расширенное меню и устанавливается в "display:none" для скрытого или "display:block" для расширенного. Этот фрагмент jQuery проверяет текущую точку останова на маленьком (мобильном устройстве) при щелчке элемента навигации в классе меню по умолчанию, который я использую, и если true изменяет селектор css на "display: none", эффективно закрывая переключатель меню.

2

более чистый способ (вместо триггера нажмите или удалите класс):

 $(document).on("click", ".top-bar li", function () {
     Foundation.libs.topbar.toggle($('.top-bar'));
 });
1

это то, что работает для меня:

setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);

позвольте мне знать, если это работает для вас тоже. (Возможно, уменьшите "500" до времени, более короткого, чем на полсекунды).

вот Расширенная версия:

<script type="text/javascript">
function hideDropDown() {
  setTimeout(function() {$(document).foundation('topbar', 'reflow')}, 500);
}
</script>
<nav class="top-bar" data-topbar role="navigation">
  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">My menu</a>
        <ul class="dropdown">
          <li><a onclick="hideDropDown()" target="another_page" href="/some/where">Menu item</a></li>
        </ul>
      </li>
    </ul>
  </section>
</nav>
0

Я скопировал часть кода в коде функции закрытия раскрывающегося списка Foundation 6.

чтобы заставить его работать мне пришлось установить параметр data-disable-hover= " true на элементе меню, иначе меню не закрывалось бы при первом нажатии пользователем элемента в нем.

Я написал свой код в AngularJS и заставил его работать. Я думаю, это будет выглядеть так для jQuery. Другими словами, код не проверял.

$('#main-menu li').click(function closeDropdown() {
     var $toClose = $('#main-menu');

     if(!$toClose){
        return;
     }

     var somethingToClose = $toClose.hasClass('is-active') || $toClose.find('.is-active').length > 0;

     if (somethingToClose) {
        $toClose.find('li.is-active').add($toClose).attr({
           'aria-expanded': false,
           'data-is-click': false
        }).removeClass('is-active');

        $toClose.find('ul.js-dropdown-active').attr({
           'aria-hidden': true
        }).removeClass('js-dropdown-active');
     }
  });
0