Question

我一直在制作这个模板页面，并希望它能够在按下菜单按钮后，在某个屏幕尺寸以下导航栏变得可扩展。我有媒体工作，但jquery不会使菜单滑出。我只是担心目前的功能，以后可以处理美学问题。此外，我使用JQuery，因为我觉得它更容易使用（可能不需要，但我更喜欢它，因为它节省了我的时间）。

＆＃13;

$(document).ready(function() {
	$('.nav_li_small').hide();
	$('#menu').click(function() {
		$('.nav_ul_small').animate({width: '100%'}, 200);
		$('.nav_li_small').show();
	});
});

＆＃13;

body {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmnAiwrvrJIdXGctU8ria4DrIWLxr3ozVposlXByZJUcg_65BB); 
  background-repeat: no-repeat;
	background-size: 100vw 100vh;
	background-color: #cccccc !important;
	border-top:0px;
	margin-top:0px;
	margin-right:0px;
	margin-bottom:0px;
	margin-left:0px;
}
.container-fluid {
	position: relative;
	background-color: #fff;
	height: 0px;
}
.no-gutter > [class*='col-'] {
    	padding-right:0;
    	padding-left:0;
}
.name {
	
}
#company_name {
	font-size: 35px;
	font-family: 'Raleway', sans-serif;
	position: absolute;
	color: #fff;
	padding: 20px;
}
.head_bar {
	position: absolute;
	width: 100%;
}
.head_small {
	display: none;
}
.nav_ul {
	float: right !important;
	position: absolute;
	list-style-type: none;
    	padding: 30px;
}
.nav_li {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	color: #fff;
	padding: 20px;
	display: inline-flex;
}
.nav_li a {
	color: #fff;
}
.nav_li a:hover {
	color: #fff;
	border-bottom: 3px solid white;
	text-decoration: none;
}
.nav_ul_small {
	position: absolute;
	list-style-type: none;
    padding: 0px;
	height: 100vh;
	background-color: gray;
	z-index: 2;
}
.nav_li_small {
	font-size: 13px;
	font-family: 'Raleway', sans-serif;
	color: #fff;
	padding: 10px;
	z-index: 3;
}
.nav_li_small a {
	color: #fff;
}
.nav_li_small a:hover {
	color: #fff;
	border-bottom: 3px solid white;
	text-decoration: none;
}
#company_name_small {
	text-align: center;
	font-size: 35px;
	font-family: 'Raleway', sans-serif;
	position: absolute;
	color: #fff;
	padding: 10px; 
	left: 0;
}
@media only screen and (max-width: 940px) {
	.head_bar{ display: none; }
	.head_small { display: inline; }
}
.active {
	border-bottom: 3px solid white;
}
.content {
	position: relative;
	top: 40vh;
}
.content_box {
	background-color: #fff;
	color: #000;
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	padding: 10px !important;
	box-shadow: 0 0 5px #312424;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
	<link rel = "stylesheet" type = "text/css" href = "Home.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src = "Home.js"></script>
</head>
  <body>
	<div class = "container-fluid">
		<div class = "row no-gutter head_bar">
			<h2 id = "company_name" class = "col-xs-3">Welcome</h2>
			<ul class = "col-xs-9 nav_ul" align = "right">
				<li class = "nav_li"><a href = "" class = "active">Home</a></li>
				<li class = "nav_li"><a href = "">About Us</a></li>
				<li class = "nav_li"><a href = "">Contact</a></li>
				<li class = "nav_li"><a href = "">Portfolio</a></li>
			</ul>			
		</div>
		<div class = "row no-gutter head_small">
			<h2 id = "company_name_small" class = "col-xs-12">Welcome</h2>
		</div>
		<div class = "row no-gutter head_small">	
			<button id = "menu">Menu</button>
			<ul class = "nav_ul_small">
				<li class = "nav_li_small"><a href = "" class = "active">Home</a></li>
				<li class = "nav_li_small"><a href = "">About Us</a></li>
				<li class = "nav_li_small"><a href = "">Contact</a></li>
				<li class = "nav_li_small"><a href = "">Portfolio</a></li>
			</ul>			
		</div>
		<div class = "row no-gutter content">
			<span class = "col-xs-2"></span>
			<div class = "col-xs-8 content_box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum ex sed erat dignissim convallis. Vestibulum ut volutpat leo, sit amet iaculis ex. Pellentesque vitae pulvinar lorem. Nulla vel enim at neque rutrum convallis. Praesent varius non dui eu molestie. Pellentesque tincidunt, sapien sed placerat pulvinar, mi magna mollis justo, sed aliquam ante sem at ante. Donec laoreet rhoncus velit, vitae interdum nisi rutrum in. Pellentesque non lectus et nunc eleifend luctus in et nisi. Duis sit amet enim a enim vestibulum pulvinar nec vitae erat. Donec gravida mattis suscipit. Donec elementum porta volutpat. Maecenas scelerisque, nisi a pharetra gravida, felis risus egestas magna, id dictum nulla est eget dui. Integer in tempus sapien.<br><br>In eget nunc non sem dignissim ullamcorper non ut risus. Vestibulum rutrum ipsum nec pellentesque placerat. Nulla aliquam a elit vel molestie. Maecenas maximus, dolor ac rhoncus varius, turpis eros imperdiet libero, nec tempor tortor ex quis ligula. Nulla a molestie lectus, non feugiat diam. Cras tempor eget purus nec sollicitudin. Donec aliquam, neque vel hendrerit dignissim, orci purus dictum justo, a tristique sapien neque sed arcu. Nullam condimentum enim ac tellus bibendum posuere. Proin vel turpis eget tellus hendrerit dignissim id ut nunc. Aenean facilisis tempor magna, id scelerisque orci. In hac habitasse platea dictumst. Donec ac libero laoreet, molestie ex ultricies, hendrerit leo.<br><br>Cras ligula neque, cursus ut urna et, luctus viverra est. Quisque pretium interdum elit in vehicula. Fusce tempus lacus nisl, a tincidunt odio luctus sed. Aenean ut risus eu ipsum interdum tristique at eu est. Fusce euismod est ac est condimentum, id vehicula erat efficitur. Sed eleifend ac risus et gravida. Etiam varius vehicula arcu, at bibendum orci pharetra eu. Ut iaculis convallis aliquam. Nam non fringilla turpis. Donec sodales eros vitae elit maximus interdum. Donec molestie pulvinar elit ac tristique. Praesent convallis elementum dolor ac scelerisque.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum est ac ex malesuada tempus. In cursus aliquet mauris, nec finibus leo dictum sit amet. Nunc euismod lacus ac nisl aliquet, non ullamcorper mi auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam vitae rhoncus urna. Ut lectus odio, ultricies sit amet pellentesque sed, gravida sit amet odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed pretium, velit vitae lobortis mollis, turpis lectus semper nisi, et pharetra nisl eros eu dui. In interdum porta lorem, ut maximus lacus pretium sed. Aliquam placerat turpis at nunc consectetur, eu dapibus risus iaculis. Fusce mi massa, placerat a ullamcorper a, scelerisque et nisl. Pellentesque egestas mollis tempor. Maecenas porttitor tempor nibh eu semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam sed enim in neque malesuada sollicitudin. Nulla venenatis risus lectus, a maximus ex semper vitae.<br><br>Sed eu enim maximus dui elementum iaculis a sit amet nibh. In a neque eu leo dapibus sagittis vel a ligula. Integer quis velit leo. Nullam in urna libero. Donec interdum, nisi vel cursus pulvinar, ex est iaculis justo, faucibus fermentum odio massa eu ligula. Donec at mauris tincidunt, consequat sem in, malesuada ipsum. Donec vehicula est vitae nunc euismod, vitae mattis arcu pretium.<br><br>Proin mattis ipsum sit amet mi auctor, vel auctor odio malesuada. In dictum eros et sem vestibulum, eu aliquet ex auctor. Integer mattis auctor dui, non pretium mi. Sed consequat magna vel dui fermentum, in placerat quam tincidunt. Maecenas cursus at mauris eget commodo. Nam convallis erat non sapien tincidunt, sed luctus tellus molestie. Ut pharetra dolor vel tellus vestibulum, sed elementum est posuere.</div>
			<span class = "col-xs-2"></span>
		</div>
	</div>

	<script src="http://maxcdn.bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

＆＃13;

Answer 1

您应该将z-index属性添加到菜单按钮。添加一些类，例如：

<button id = "menu" class="menu-btn">Menu</button>

之后添加以下css：

.menu-btn{
    position:relative;
    z-index: 1;
}

Answer 2

原因是由于“欢迎”页面标题重叠（位置：绝对;），因此您的“菜单”按钮目前无法点击。首先，您需要将“菜单”按钮设置为顶层以使其可单击。（make position：absolute; z-index：3）。您的JS功能没有任何问题。

更改您的CSS代码，如下所述。

#menu {
position: absolute;
z-index: 3;
}

@media only screen and (max-width: 940px) {
 .head_small {
    display: block;
 }
}

Answer 3

我对您的代码进行了一些更改，并创建了JSFiddle。

首先，您需要一个z-index因为“欢迎”覆盖了您的幻灯片按钮。 z-index属性仅在您的元素position属性absolute, fixed or relative animate检查this Page以获取更多信息时才有效：

第二件事是你使用JQuery到.nav_ul_small .slideToggle()，这只会在你第一次点击按钮时触发。所以你没有选择再次关闭菜单。在这里，我使用了JQuerys .toggle()，您也可以使用<?php if(isset($_POST['checkbox'])) { // Set "activation_status" to 1. } else { // Set "activation_status" to 0. }。

我还制作了更简单的示例，我删除了大部分不必要的内容，以便您更容易理解。

以下是easy Example

Navbar不会滑出

3 个答案: