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

标签 javascript jquery html css

我现在在做一个小网站，但是遇到了这个比较麻烦的问题。

我按照提示和教程成功创建了侧边导航栏，但在将我的内容放到网站上时遇到困难。每次我尝试它总是在导航栏上结束，那么我如何添加内容到导航栏之外/分开导航栏？另一个问题是所有东西上方都有一个白色间隙，但目前看来没问题。

$(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");
	});
});
* {
	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;
    
}
<!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>

最佳答案

您似乎缺少结束“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 之前添加结束标记，它应该会调整并且不会显示在您的导航菜单中。

关于javascript - 除了侧面导航栏之外，如何向我的网站添加内容(文字)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42405342/

上一篇：javascript - 如何使下拉菜单仅在用户开始输入时显示

下一篇：javascript - "Menu"到 "Close"文本转换

相关文章：

javascript - 磨砂玻璃外观

javascript - 如何将数组连接到对象数组内的数组？

javascript - jQuery - $.post 延迟对象数组的协调事件处理程序

jquery - 将焦点设置为 KeyDown 和 KeyUp 事件之间的 SELECT 时出现问题(Firefox bug？)

c# - 家庭 Controller 中每个 mvc actionresult 的代码相同

javascript - 如何判断 Javascript 替换函数中是否发生了替换？

javascript - 创建自定义节点以扩展 HTMLIFrameElement

javascript - 未捕获的语法错误 : Unexpected token ( error

javascript - Flexbox Justify Content Space 元素之间的分布不均匀

html - 如何在 Jade 中放置跨度？

©2024 IT工具网  联系我们