無法使“移動導航”菜單正常工作

Question

我正在嘗試創建此移動菜單。

https://anythinggraphic.net/sensitive-mobile-navigation-menu/

我已經添加了所有代碼，當我將頁面放入移動視口時，該頁面什么都不做，只顯示了兩組句點“ ...”。 與摘要不同，頁面實際上顯示列表，僅當它到達列出的視口時，它才顯示周期。 我已經實現了元視口代碼和Jquery vocab。

我究竟做錯了什么？

 $(document).ready(function(){ $(function() { // Insert Responsive Navigation Icon, Close Icon, and Overlay // If you have access to your HTML, you should put this directly into your markup. $('<div class="responsive-nav-icon" />').appendTo('.row.one'); $('<div class="responsive-nav-close" />').appendTo('nav'); $('<div id="overlay" />').insertAfter('footer'); // Navigation Slide In $('.responsive-nav-icon').click(function() { $('nav').addClass('slide-in'); $('html').css("overflow", "hidden"); $('#overlay').show(); return false; }); // Navigation Slide Out $('#overlay, .responsive-nav-close').click(function() { $('nav').removeClass('slide-in'); $('html').css("overflow", "auto"); $('#overlay').hide(); return false; }); }); }); 

 .responsive-nav-icon::before, .responsive-nav-close::before { color: #93a748; content: "\\f0c9"; font-family: FontAwesome; font-size: 22px; position: relative; } .responsive-nav-close::before { color: #93a748; content: "\\f00d"; font-size: 18px; } .responsive-nav-icon { background: #fff; line-height: normal; padding: 5px 8px 4px; top: 5%; left: 5%; } .responsive-nav-icon:hover, .responsive-nav-close:hover { opacity: .7; } .responsive-nav-close { top: 10px; right: 10px; } .responsive-nav-icon, .responsive-nav-close { cursor: pointer; display: none; } #overlay { background: 0 0 rgba(0, 0, 0, 0.8); display: none; height: 100%; position: fixed; top: 0; left: 0; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 100%; z-index: 90; } @media only screen and (max-width: 960px) { .responsive-nav-icon, .responsive-nav-close { display: block; position: absolute; z-index: 1; } nav { height: 100%; padding: 20px; position: fixed; top: 0; left: -400px; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; width: 0; } nav.slide-in { left: 0; overflow-y: scroll; width: 280px; z-index: 100; } nav .menu-item { display: block; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner"> <div class="wrap"> <nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation"> <ul class="menu"> <li class="menu-item"> <a href="#">Home</a> </li> <li class="menu-item"> <a href="#">About</a> </li> <li class="menu-item"> <a href="#">Blog</a> </li> <li class="menu-item"> <a href="#">Login</a> </li> </ul> </nav> </div> </header> <main class="content" itemprop="mainContentOfPage" role="main"> ... </main> <footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo"> ... </footer> 

Answer 1

看起來您沒有鏈接響應式jquery文件... css-jquery-sensitive-mobile-navigation-menu.js