0
私は今、小さなウェブサイトに取り組んでいますが、私はこの問題に遭遇しました。これはかなり面倒です。サイドナビゲーションバー以外のウェブサイトにコンテンツ（著作物）を追加するにはどうすればよいですか？
Iveはヒントとチュートリアルに続いてサイドナビゲーションバーを作成しましたが、コンテンツをウェブサイトに配置するのに苦労しています。私が試してみるたびに、それはいつもnav barで終わるので、どのようにしてnav barの外にコンテンツを追加するのですか？別の問題は、すべての上に白い隙間がありますが、それは今のところ問題ないと思います。
$(document).ready(function(){
\t $(".fa-times").click(function(){
\t \t $(".sidebar_menu").addClass("hide_menu");
\t \t $(".toggle_menu").addClass("opacity_one");
});
\t $(".toggle_menu").click(function(){
\t \t $(".sidebar_menu").removeClass("hide_menu");
\t \t $(".toggle_menu").removeClass("opacity_one");
\t });
});* {
\t margin:0;
\t padding:0;
\t text-decoration: none;
\t list-style: none;
}
a { color: inherit; }
h1 {
margin-top: 0;
}
.toggle_menu{
\t position: fixed;
\t padding: 10px 10px 10px 10px;
\t margin-top: 70px;
\t color: white;
\t cursor: pointer;
\t background-color: #648B79;
\t z-index: 1000000;
\t font-size: 2em;
}
.sidebar_menu{
\t position: fixed;
\t width: 250px;
\t margin-left: 0px;
\t overflow: hidden;
\t height: 100vh;
\t max-height: 100vh;
\t background-color: rgba(17, 17, 17, 0.9);
\t opacity: 0.9;
\t transition: all 0.3s ease-in-out;
}
.fa-times{
\t right: 10px;
\t top: 10px;
\t opacity: 0.7;
\t cursor: pointer;
\t position: absolute;
\t color: white;
\t transition: all 0.3s ease-in-out;
}
.fa-times:hover{
\t opacity: 1;
}
.boxed_item{
\t font-family: 'Open Sans';
\t font-weight:200;
\t padding: 10px 20px;
\t display: inline-block;
\t border:solid 2px white;
\t box-sizing: border-box;
\t font-size: 22px;
\t color: white;
\t text-align: center;
\t margin-top: 70px;
}
.logo_title{
\t \t color: white;
\t \t font-family: 'Open Sans';
\t \t font-weight: 200;
\t \t font-size: 12px;
\t \t text-align: center;
\t \t padding: 5px 0px;
}
.navigation_selection{
\t margin: 20px 0;
\t display: block;
\t width: 200px;
\t margin-left: 25px;
}
.navigation_item{
\t font-weight: 200;
\t font-family: 'Open Sans';
\t color: white;
\t padding: 12px 0;
\t box-sizing: border-box;
\t font-size: 14px;
\t color: #D8D8D8;
\t border-bottom: solid 1px #D8D8D8;
\t transition: all 0.3s ease-in-out;
\t cursor: pointer;
}
.boxed_item_smaller{
\t font-size: 12px;
\t color: #D8D8D8;
\t width: 200px;
\t transition: all 0.3s ease-in-out;
\t cursor: pointer;
\t border-width: 1px;
\t margin: 0 0 20px 0;
}
.boxed_item_smaller:hover{
\t background-color: white;
\t color: #111;
\t transition: all 0.3s ease-in-out;
}
.hide_menu{
\t margin-left: -250px;
}
.opacity_one{
\t opacity: 1;
\t 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>
\t <!--stylesheets-->
\t <link rel="stylesheet" type="text/css" src="css/font-awesome.min.css">
\t <link rel="stylesheet" type="text/css" href="style.css">
\t <!--fonts-->
\t <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300' rel='stylesheet' type='text/css'>
\t <!--scripts-->
\t <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
\t <script src="menu.js"></script>
\t <script src="https://use.fontawesome.com/6cde4f18cc.js"></script>
\t <!--meta-->
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
\t <title>Slide-Out Navigation Bar</title> \t
</head>
<body>
\t <i class="fa fa-bars toggle_menu"></i>
\t \t
\t <div class="sidebar_menu">
\t \t <i class="fa fa-times"></i>
\t \t <center>
\t \t \t <a href="index.html"><h1 class="boxed_item">Cupcakery</h1></a>
\t \t \t <h2 class="logo_title">The best cupcakes in town!</h2>
\t \t </center>
\t \t <ul class="navigation_selection">
\t \t \t <li class="navigation_item"><a href="Cupcakes & Orders.html">Cupcakes & Orders</a></li>
\t \t \t <li class="navigation_item"><a href="Who we are.html">Who we are</a></li>
\t \t \t <li class="navigation_item"><a href="Our Location.html">Our Location</a></li>
\t \t \t <li class="navigation_item"><a href="Contact Us.html">Contact Us</a></li>
\t \t </ul>
\t \t
\t \t <center>
\t \t \t <a href="#"><h1 class="boxed item boxed_item_smaller">
\t \t \t <i class="fa fa-user"></i>
\t \t \t ORDER NOW!
\t \t \t </h1></a>
\t \t </center>
\t <div class="post-body">
<section class="post-content">
<!--PROBLEM-->
<p>testing, why does this show up on the navbar?</p>
</body>
</html>