除了侧面导航栏之外，如何向我的网站添加内容（文字）？

时间：2017-02-23 01:16:52

标签： javascript jquery html css

我现在在一个小网站上工作，但我遇到了这个很麻烦的问题。

我已经成功创建了一个侧面导航栏，按照提示和教程，但我正在努力将我的内容放到网站上。每次我尝试它总是在导航栏上结束，那么如何在导航栏中添加/分开内容？另一个问题是，所有东西都有一个白色的间隙，但现在看来还不错。

＆＃13;
＆＃13; 
$(document).ready(function(){
	$(".fa-times").click(function(){
		$(".sidebar_menu").addClass("hide_menu");
		$(".toggle_menu").addClass("opacity_one");
});

	$(".toggle_menu").click(function(){
		$(".sidebar_menu").removeClass("hide_menu");
		$(".toggle_menu").removeClass("opacity_one");
	});
});
＆＃13; 
* {
	margin:0;
	padding:0;
	text-decoration: none;
	list-style: none; 
}

a { color: inherit; } 

h1 {
    margin-top: 0;
}

.toggle_menu{
	position: fixed;
	padding: 10px 10px 10px 10px;
	margin-top: 70px;
	color: white;
	cursor: pointer;
	background-color: #648B79;
	z-index: 1000000;
	font-size: 2em;
}

.sidebar_menu{
	position: fixed;
	width: 250px;
	margin-left: 0px;
	overflow: hidden;
	height: 100vh;
	max-height: 100vh;
	background-color: rgba(17, 17, 17, 0.9);
	opacity: 0.9;
	transition: all 0.3s ease-in-out;
}

.fa-times{
	right: 10px;
	top: 10px;
	opacity: 0.7;
	cursor: pointer;
	position: absolute;
	color: white;
	transition: all 0.3s ease-in-out;
}


.fa-times:hover{
	opacity: 1;
}

.boxed_item{
	font-family: 'Open Sans';
	font-weight:200;
	padding: 10px 20px;
	display: inline-block;
	border:solid 2px white;
	box-sizing: border-box;
	font-size: 22px;
	color: white;
	text-align: center;
	margin-top: 70px;
}

.logo_title{
		color: white;
		font-family: 'Open Sans';
		font-weight: 200;
		font-size: 12px;
		text-align: center;
		padding: 5px 0px;
}

.navigation_selection{
	margin: 20px 0;
	display: block;
	width: 200px;
	margin-left: 25px;
}

.navigation_item{
	font-weight: 200;
	font-family: 'Open Sans';
	color: white;
	padding: 12px 0;
	box-sizing: border-box;
	font-size: 14px;
	color: #D8D8D8;
	border-bottom: solid 1px #D8D8D8;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.boxed_item_smaller{
	font-size: 12px;
	color: #D8D8D8;
	width: 200px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	border-width: 1px;
	margin: 0 0 20px 0;
}

.boxed_item_smaller:hover{
	background-color: white;
	color: #111;
	transition: all 0.3s ease-in-out;
}

.hide_menu{
	margin-left: -250px;
}

.opacity_one{
	opacity: 1;
	transition: all 0.3s ease-in-out;
}

.post-body {
    position: relative;
    padding: 0 20px 20px;
}

.post-content {
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Open Sans";
    font-weight: 300;
    font-size: 1.2em;
    line-height: 1.5;
    
}
＆＃13; 
<!doctype html> 
<html> 
<head> 
	<!--stylesheets-->
	<link rel="stylesheet" type="text/css" src="css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<!--fonts-->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
	<!--scripts-->
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="menu.js"></script>
	<script src="https://use.fontawesome.com/6cde4f18cc.js"></script>
	<!--meta-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Slide-Out Navigation Bar</title>	
</head>
<body>
	<i class="fa fa-bars toggle_menu"></i>
		
	<div class="sidebar_menu">
		<i class="fa fa-times"></i>
		<center>
			<a href="index.html"><h1 class="boxed_item">Cupcakery</h1></a>
			<h2 class="logo_title">The best cupcakes in town!</h2>
		</center>

		<ul class="navigation_selection">
			<li class="navigation_item"><a href="Cupcakes & Orders.html">Cupcakes & Orders</a></li>
			<li class="navigation_item"><a href="Who we are.html">Who we are</a></li> 
			<li class="navigation_item"><a href="Our Location.html">Our Location</a></li>
			<li class="navigation_item"><a href="Contact Us.html">Contact Us</a></li>
		</ul>
		
		<center>
			<a href="#"><h1 class="boxed item boxed_item_smaller">
			<i class="fa fa-user"></i>
			ORDER NOW!
			</h1></a>
		</center>
	<div class="post-body">
<section class="post-content">
<!--PROBLEM-->
<p>testing, why does this show up on the navbar?</p>
</body> 
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

看起来你错过了一个结束“div”标签：

* {
	margin:0;
	padding:0;
	text-decoration: none;
	list-style: none; 
}

a { color: inherit; } 

h1 {
    margin-top: 0;
}

.toggle_menu{
	position: fixed;
	padding: 10px 10px 10px 10px;
	margin-top: 70px;
	color: white;
	cursor: pointer;
	background-color: #648B79;
	z-index: 1000000;
	font-size: 2em;
}

.sidebar_menu{
	position: fixed;
	width: 250px;
	margin-left: 0px;
	overflow: hidden;
	height: 100vh;
	max-height: 100vh;
	background-color: rgba(17, 17, 17, 0.9);
	opacity: 0.9;
	transition: all 0.3s ease-in-out;
}

.fa-times{
	right: 10px;
	top: 10px;
	opacity: 0.7;
	cursor: pointer;
	position: absolute;
	color: white;
	transition: all 0.3s ease-in-out;
}


.fa-times:hover{
	opacity: 1;
}

.boxed_item{
	font-family: 'Open Sans';
	font-weight:200;
	padding: 10px 20px;
	display: inline-block;
	border:solid 2px white;
	box-sizing: border-box;
	font-size: 22px;
	color: white;
	text-align: center;
	margin-top: 70px;
}

.logo_title{
		color: white;
		font-family: 'Open Sans';
		font-weight: 200;
		font-size: 12px;
		text-align: center;
		padding: 5px 0px;
}

.navigation_selection{
	margin: 20px 0;
	display: block;
	width: 200px;
	margin-left: 25px;
}

.navigation_item{
	font-weight: 200;
	font-family: 'Open Sans';
	color: white;
	padding: 12px 0;
	box-sizing: border-box;
	font-size: 14px;
	color: #D8D8D8;
	border-bottom: solid 1px #D8D8D8;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.boxed_item_smaller{
	font-size: 12px;
	color: #D8D8D8;
	width: 200px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	border-width: 1px;
	margin: 0 0 20px 0;
}

.boxed_item_smaller:hover{
	background-color: white;
	color: #111;
	transition: all 0.3s ease-in-out;
}

.hide_menu{
	margin-left: -250px;
}

.opacity_one{
	opacity: 1;
	transition: all 0.3s ease-in-out;
}

.post-body {
    position: relative;
    padding: 0 20px 20px;
}

.post-content {
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Open Sans";
    font-weight: 300;
    font-size: 1.2em;
    line-height: 1.5;
    
}
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="menu.js"></script>
	<script src="https://use.fontawesome.com/6cde4f18cc.js"></script>



	<i class="fa fa-bars toggle_menu"></i>	
	<div class="sidebar_menu">
		<i class="fa fa-times"></i>
		<center>
			<a href="index.html"><h1 class="boxed_item">Cupcakery</h1></a>
			<h2 class="logo_title">The best cupcakes in town!</h2>
		</center>

		<ul class="navigation_selection">
			<li class="navigation_item"><a href="Cupcakes & Orders.html">Cupcakes & Orders</a></li>
			<li class="navigation_item"><a href="Who we are.html">Who we are</a></li> 
			<li class="navigation_item"><a href="Our Location.html">Our Location</a></li>
			<li class="navigation_item"><a href="Contact Us.html">Contact Us</a></li>
		</ul>
		
		<center>
			<a href="#"><h1 class="boxed item boxed_item_smaller">
			<i class="fa fa-user"></i>
			ORDER NOW!
			</h1></a>
		</center>
   </div> <!--closing sidebar_menu div -->
	<div class="post-body">
<section class="post-content">
<!--PROBLEM-->
<p>testing, why does this show up on the navbar?</p>

如果您在“post-body”div之前添加结束标记，则应调整并不显示在导航菜单中。

相关问题
最新问题