Question

我正在尝试创建此移动菜单。

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

我添加了所有代码，当我将页面放入移动视口时，页面只会显示两组句点“...”。与片段不同，页面实际上显示了列表，就在它到达列出的视口时，它显示了句点。我实现了元视口代码和Jquery词汇。

我做错了什么？

$(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-responsive-mobile-navigation-menu.js

无法使移动导航菜单正常工作

1 个答案: