I tried to adapt the menu bar and content using ready-made styles.
And then I try to add some content from a known set of ready-made styles.
I try to add several elements
but they overlap or remove each other’s style or elements.
How can I make the navigation bar separately independent and be able to add content elements from a known set of ready-made styles without damaging the navigation bar and themselves?
How can I adapt the menu bar and content using ready-made styles?
I would like, if possible, to try to somehow integrate the menu bar into the style system. I’m still a beginner.
I mainly do logic in Django, and for the interface, blocks are something similar to fomantic-ui.com – ready-made style systems.
Now I’m trying to add a menu bar different from the style (“fomantic-ui.com”) – but it doesn’t work the same as without the style system (“fomantic-ui.com”).
It overlaps the content and the style seems to be mixed.
I’m trying to create a Django . HTML design from the navigation bar made by hand and the rest of the content to design based on ready-made styles – fomantic-ui.com.
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidebar Menu | Side Navigation Bar</title>
<!-- CSS -->
<link rel="stylesheet" href="{% static "css/style.css" %}" />
<!-- Boxicons CSS -->
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<!-- You MUST include jQuery 3.4+ before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</head>
<body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
<nav>
<div class="logo">
<i class="bx bx-menu menu-icon"></i>
<span class="logo-name">InfoEco</span>
</div>
<div class="sidebar">
<div class="logo">
<i class="bx bx-menu menu-icon"></i>
<span class="logo-name">InfoEco</span>
</div>
<div class="sidebar-content">
<ul class="lists">
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-home-alt icon"></i>
<span class="link">Home</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-bar-chart-alt-2 icon"></i>
<span class="link">Label Nav Menu 1</span>
</a>
<div class="sub-menu">
<a href="#">Label Nav Sub Menu 1</a>
<a href="#">Label Nav Sub Menu 2</a>
<a href="#">Label Nav Sub Menu 3</a>
<a href="#">Label Nav Sub Menu 4</a>
</div>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-bell icon"></i>
<span class="link">Label Nav Menu 2</span>
</a>
<div class="sub-menu">
<a href="#">Label Nav Sub Menu 1</a>
<a href="#">Label Nav Sub Menu 2</a>
</div>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-heart icon"></i>
<span class="link">Label Nav Menu 3</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-folder-open icon"></i>
<span class="link">Label Nav Menu 4</span>
</a>
</li>
</ul>
<div class="bottom-cotent">
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-cog icon"></i>
<span class="link">Label Nav Menu 5</span>
</a>
</li>
<li class="list">
<a href="#" class="nav-link">
<i class="bx bx-log-out icon"></i>
<span class="link">Label Nav Menu 6</span>
</a>
</li>
</div>
</div>
</div>
</nav>
<section class="overlay"></section>
<div class="ui container">
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical menu">
<a class="item">
<h4 class="ui header">Promotions</h4>
<p>Check out our new promotions</p>
</a>
<a class="item">
<h4 class="ui header">Coupons</h4>
<p>Check out our collection of coupons</p>
</a>
<a class="item">
<h4 class="ui header">Rebates</h4>
<p>Visit our rebate forum for information on claiming rebates</p>
</a>
</div>
</div>
<div class="twelve wide column">content</div>
</div>
</div>
<script src="{% static "script/script.js" %}"></script>
</body>
</html>
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");
}
});
});
