если вы добавите position: relative
к своему телу, ваша проблема должна быть решена.
$(document).ready(function() {
//sidepanel navigation
$(".toggleButton").on("click", function() {
if ($(".sidepanel").css("width") == "0px") {
var mainWidth = $("#main").width() - 256;
$(".sidepanel").css("width", `15%`);
$("#main").css("margin-left", `15%`);
$("#main").css("width", `85%`);
} else {
$(".sidepanel").css("width", "0%");
$("#main").css("margin-left", "0%");
$("#main").css("width", "100%");
}
});
//menu item navigation
$(".menuItem").on("click", function() {
// if this menuitem is collapsed
if ($(this).next().css("height") == "0px") {
// turning off all other menu items except for this
$(".menuItem").not($(this)).next("div").css("height", "0px");
$(".menuItem").not($(this)).removeClass("openAnchor");
$(".menuItem").not($(this)).addClass("collapsedAnchor");
// turning off all sub menu items except for this
$(".subMenuItem").next("div").css("height", "0px");
$(".subMenuItem").removeClass("openAnchor");
$(".subMenuItem").addClass("collapsedAnchor");
// substituting collapsed class for open class
$(this).removeClass("collapsedAnchor");
$(this).addClass("openAnchor");
var numberOfChildren = $(this).next("div").find("> a").length;
var height = 37 * numberOfChildren;
$(this).next("div").css("height", `${height}px`);
} else {
$(this).removeClass("openAnchor");
$(this).addClass("collapsedAnchor");
$(this).next("div").css("height", "0px");
}
});
// sub menu item navigation
$(".subMenuItem").on("click", function() {
// if this menuitem is collapsed
if ($(this).next().css("height") == "0px") {
// accesing sibling open anchor
var openAnchorChildNumber = $(this).parent().find(".openAnchor").first().next("div").find("> a").length;
var heightToDeduce = 37 * openAnchorChildNumber;
console.log(heightToDeduce);
// turning off all other sub menu items except for this
$(".subMenuItem").not($(this)).next("div").css("height", "0px");
$(".subMenuItem").not($(this)).removeClass("openAnchor");
$(".subMenuItem").not($(this)).addClass("collapsedAnchor");
// substituting collapsed class for open class
$(this).removeClass("collapsedAnchor");
$(this).addClass("openAnchor");
var numberOfChildren = $(this).next("div").find("> a").length;
var height = 37 * numberOfChildren;
$(this).next("div").css("height", `${height}px`);
var parentHeight = $(this).parent().height() + height - heightToDeduce;
$(this).parent().css("height", `${parentHeight}px`);
} else {
$(this).removeClass("openAnchor");
$(this).addClass("collapsedAnchor");
$(this).next("div").css("height", "0px");
var numberOfChildren = $(this).next("div").find("> a").length;
var height = 37 * numberOfChildren;
var parentHeight = $(this).parent().height() - height;
$(this).parent().css("height", `${parentHeight}px`);
}
});
});
body {
position: relative;
}
/* The sidepanel menu */
.sidepanel {
height: 100%; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: absolute; /* Stay in place */
z-index: 1;
left: 0;
background-color: #221F20; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 40px; /* Place content 60px from the top */
transition: 0.3s;
}
.sidepanel .collapsedAnchor::after {
font-family: 'Font Awesome 5 Free';
float: right;
font-weight: 900;
content: "\f054";
}
.sidepanel .openAnchor::after {
font-family: 'Font Awesome 5 Free';
float: right;
font-weight: 900;
content: "\f078";
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #B7B6B8;
display: block;
transition: 0.3s;
font-size: 13px;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #FFFFFF;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
a.menuItem i.fa{
font-size: 15px;
}
#main {
transition: margin-left 0.5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.sidepanel .subMenus {
padding-left: 3%;
/* position: fixed; */
overflow-y: hidden;
transition: 0.5s;
}
.subMenus a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: 13px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar" >
<a href="#" class="toggleButton"><i class="fa fa-align-left" style="color: #000;"></i></a>
<p>
user
</p>
</div>
<div class="sidepanel">
<!-- General panel -->
<a href="#"><i class="fas fa-file-alt sidepanel-icon"></i> General</a>
</div>
<div class="container-fluid px-5 mt-2" id="main">
<div class="row py-4">
<div class="col-md-6 page-title-div">
<div class="page-header">
<h2>HTML</h2>
</div>
</div>
</div>
<div class="row card py-4 rounded">
<div class="col-md-6 page-title-div">
<div>
<p>In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
</p>
</div>
</div>
</div>
</div>