Как разделить панель навигации и содержимое, не повредив их? ⇐ CSS

[Anonymous]

Я пытался создать панель навигации для сайта.
А затем пытаюсь добавить контент из известного набора готовых стилей.
Я пытаюсь добавить несколько элементов
но они перекрывают или удаляют стиль или элементы друг друга.
Как сделать панель навигации отдельно независимой и иметь возможность добавлять элементы контента из известного набора готовых стилей, не повредив при этом панель навигации и самих себя?
Как отделить панель навигации и контент из набора готовых стилей, не повредив при этом это?
index.html

Код: Выделить всё

{% load static %}






Sidebar Menu | Side Navigation Bar

[*]










[i][/i]
InfoEco


[i][/i]
InfoEco

[list]

[url=#]
[i][/i]
Home
[/url]

[*]
[url=#]
[i][/i]
Label Nav Menu 1
[/url]

[url=#]Label Nav Sub Menu 1[/url]
[url=#]Label Nav Sub Menu 2[/url]
[url=#]Label Nav Sub Menu 3[/url]
[url=#]Label Nav Sub Menu 4[/url]

[*]
[url=#]
[i][/i]
Label Nav Menu 2
[/url]

[url=#]Label Nav Sub Menu 1[/url]
[url=#]Label Nav Sub Menu 2[/url]

[*]
[url=#]
[i][/i]
Label Nav Menu 3
[/url]

[*]
[url=#]
[i][/i]
Label Nav Menu 4
[/url]

[/list]

[*]
[url=#]
[i][/i]
Label Nav Menu 5
[/url]

[*]
[url=#]
[i][/i]
Label Nav Menu 6
[/url]











[h4]Promotions[/h4]
Check out our new promotions


[h4]Coupons[/h4]
Check out our collection of coupons


[h4]Rebates[/h4]
Visit our rebate forum for information on claiming rebates



content

style.css

Код: Выделить всё

/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100%;
background: #e3f2fd;
}
nav {
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
display: flex;
align-items: center;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
nav .logo {
display: flex;
align-items: center;
margin: 0 24px;
}
.logo .menu-icon {
color: #333;
font-size: 24px;
margin-right: 14px;
cursor: pointer;
}
.logo .logo-name {
color: #333;
font-size: 22px;
font-weight: 500;
}
nav .sidebar {
position: fixed;
top: 0;
left: -100%;
height: 100%;
width: 260px;
padding: 20px 0;
background-color: #fff;
box-shadow: 0 5px 1px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
}
nav.open .sidebar {
left: 0;
}
.sidebar .sidebar-content {
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
padding: 30px 16px;
}
.sidebar-content .list {
list-style: none;
}
.list .nav-link {
display: flex;
align-items: center;
margin: 8px 0;
padding: 14px 12px;
border-radius: 8px;
text-decoration: none;
}
.lists .nav-link:hover {
background: linear-gradient(#dfe4e6, #eff2f4);
}
.nav-link .icon {
margin-right: 14px;
font-size: 20px;
color: #707070;
}
.nav-link .link {
font-size: 16px;
color: #707070;
font-weight: 400;
}
.lists .nav-link:hover .icon,
.lists .nav-link:hover .link {
color: #4b6a78;
font-weight: 500;
}
.overlay {
position: fixed;
top: 0;
left: -100%;
height: 1000vh;
width: 200%;
opacity: 0;
pointer-events: none;
transition: all 0.4s ease;
background: rgba(0, 0, 0, 0.3);
}
nav.open ~ .overlay {
opacity: 1;
left: 260px;
pointer-events: auto;
}
nav .sidebar .sidebar-content .list .sub-menu {
margin-left: 5px;
padding-left: 10px;
border-left: 1px solid #bbb;
max-height: 0px;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
nav .sidebar .sidebar-content .list.active .sub-menu {
max-height: 500px;
}
nav .sidebar .sidebar-content .list .sub-menu a {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px 0px;
font-size: 16px;
color: #707070;
font-weight: 400;
cursor: pointer;
}
nav .sidebar .sidebar-content .list .sub-menu a:hover {
background: linear-gradient(#dfe4e6, #eff2f4);
color: #4b6a78;
font-weight: 500;
}

script.js

Код: Выделить всё

const navBar = document.querySelector("nav"),
menuBtns = document.querySelectorAll(".menu-icon"),
overlay = document.querySelector(".overlay");

menuBtns.forEach((menuBtn) => {
menuBtn.addEventListener("click", () => {
navBar.classList.toggle("open");
});
});

overlay.addEventListener("click", () => {
navBar.classList.remove("open");
});

document.querySelectorAll("nav .sidebar .sidebar-content .list a").forEach(function(list){
list.addEventListener("click",function(e){
if(e.target.parentNode.children.length > 1){
e.target.parentNode.classList.toggle("active");
}
});
});

[img]https://i. sstatic.net/rM0ngPkZ.png[/img]


Подробнее здесь: https://stackoverflow.com/questions/790 ... amaging-it