0
Ich arbeite gerade an einer kleinen Website, aber ich habe dieses Problem festgestellt, das ziemlich mühsam ist.Wie füge ich meiner Website neben meiner seitlichen Navigationsleiste Inhalte (Schriften) hinzu?
Ive erfolgreich erstellt eine seitliche Navigationsleiste, Tipps und Tutorials folgen, aber ich habe Probleme mit der Bereitstellung meiner Inhalte auf der Website. Jedes Mal, wenn ich es versuche, endet es immer in der Navigationsleiste. Wie füge ich also Inhalte aus der Navigationsleiste hinzu? Ein weiteres Problem ist, dass es eine weiße Lücke über alles gibt, aber das scheint jetzt in Ordnung zu sein.
$(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>