Создание моего раскрывающегося меню сворачивается при щелчке ссылки привязки на небольших устройствах с использованием JavaScript - PullRequest
Новая
       16

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

0 голосов
/ 06 ноября 2018

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

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

конкретная страница, на которую я ссылаюсь, является http://www.valentinosgourmet.com/menu.html

вот код сценария в настоящее время .. их 2, потому что у меня есть основная навигационная панель навигации, а затем второй со всеми элементами меню

// Переключение между добавлением и удалением «отзывчивого» класса в topnav, когда пользователь нажимает на значок 

    function myFunctionGetMainNav() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }

</script>

<script>
// Toggle between adding and removing the "responsive" class to menunav when the user clicks on the icon

    function myFunctionGetMenuNav() {
        var x = document.getElementById("menuNavbar");
        if (x.className === "menunav") {
            x.className += " responsiveMenu";
        } else {
            x.className = "menunav";
        }
    }

</script>

любая помощь в правильном направлении будет высоко ценится!

спасибо!

1 Ответ

0 голосов
/ 08 ноября 2018

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

// JavaScript Document


//menu navigation bar
$(document).ready(function(){

// --- Mobile Menu -------------------------
$("#menu-icon, .menunav a").click(function(){
  if(window.matchMedia('(max-width: 768px)').matches) {
    $("#main-navigation").slideToggle("slow");
    $("#menu-icon i").toggleClass("icon-close");
  }
});



// --- Smooth Scroll -----------------------

  $('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
  if (
  location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
  &&
  location.hostname == this.hostname
  ) {
      var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
     if (target.length) {
       event.preventDefault();
       $('html, body').animate({
           scrollTop: target.offset().top - 80
        }, 1000, function() {
            var $target = $(target);
         $target.focus();
         if ($target.is(":focus")) {
           return false;
        } else {
        $target.attr('tabindex','-1');
        $target.focus();
        };
      });
      }
     }
   });
 }); // --- End document ---------------------------------------------------------

надеюсь, это кому-нибудь поможет. если кто-нибудь знает, почему смещение не остается смещенным, дайте мне знать, пожалуйста ... оно начинает смещаться, но затем, когда оно достигает смещения, оно возвращается вверх (под заголовком): (

...