Side navigation with top, bottom, and overflow

Side navigation with top, bottom, and overflow - javascript

I'm trying to create a side navigation with a top & bottom. When the window height shrinks, I want the bottom navigation to overlap the top & the top navigation to have a scroll. I put in some CSS gradient to help indicate to the user that items are overflowed but instead I want a scrollbar. I only want the scrollbar if the content is overflowed (likely requires JS but I could be wrong).
Help appreciated
Fiddle here, HTML & CSS below.
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
html,
body,
.pane-sidebar {
height: 100%;
}
.pane-sidebar {
background-color: #456081;
position: relative;
text-align: center;
width: 75px;
}
.full-height,
.k-splitter.full-height {
height: 100%;
padding: 0;
margin: 0;
}
.pane-sidebar .sidebar-menu-wrapper {
padding: 1.25rem 0;
min-height: 40rem;
overflow: auto;
}
.pane-sidebar .brand {
padding: 0;
margin: 0;
font-weight: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.875rem;
color: #ffffff;
}
.pane-sidebar ul.primary {
min-height: 26.25rem;
}
.pane-sidebar ul {
list-style: none;
margin: 0;
padding: 2rem 0;
text-align: center;
}
.pane-sidebar ul li {
padding-bottom: 1.5rem;
}
.pane-sidebar ul li.secondary {
padding-bottom: 0.625rem;
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
.pane-sidebar ul li a {
font-size: 2rem;
color: #ffffff;
text-decoration: none;
display: block;
}
.pane-sidebar ul li.secondary a span {
font-size: 0.625rem;
}
.pane-sidebar ul li a span {
font-size: 0.75rem;
color: #ffffff;
display: block;
}
.pane-sidebar ul.secondary {
position: absolute;
bottom: 0;
left: 50%;
width: 4rem;
margin-left: -2rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%);
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
button {
background-color: transparent;
border: 0 none;
}
.pane-sidebar .show-errors {
cursor: pointer;
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
overflow: visible;
text-transform: none;
background-color: #4b708b;
color: #fff;
padding: 0.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="pane-sidebar full-height">
<div class="sidebar-menu-wrapper">
<h1 class="brand">Brand</h1>
<ul class="primary">
<li>
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
</ul>
<ul class="secondary">
<li class="secondary">
<button class="show-errors" type="button">
<i class="far fa-bell"></i>
</span>
</button>
</li>
<li class="secondary">
<a href="#">
<i class="fas fa-box"></i>
<span>Bottom</span>
</a>
</li>
</ul>
</div>

You could use flexbox on the menu-wrapper. Then make your primary fill the extra space and show a scrollbar:
.sidebar-menu-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.primary {
flex: 1;
overflow-y: auto;
}
Here is a fiddle: https://jsfiddle.net/mehg8uL2/

Related

Load Content in div without refreshing whole page

I am creating a small webapp in flask,where I have a sidebar navigation which consist of all question.
When I click on question,respective question page is rendered in right section.
But,the question which is clicked,is not selected and navigate to the top.
How, I can keep the question which is clicked selected and on focus?
body {
margin: 0;
padding: 0;
font-family: 'montserrat';
background: #e3e9f7;
}
.logo {
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
height: 100%;
width: 260px;
position: fixed;
top: 0;
left: 0;
background-color: #2b2626;
max-height: 100vh;
overflow-y: auto;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
font-family: 'montserrat';
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
color: #fff;
position: relative;
padding: 15px 0px 15px 25px;
transition: all 0.5s;
}
nav ul li a:before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #e3e9f7;
border-radius: 40px 0 0 40px;
z-index: -1;
transition: all 1s;
}
nav ul li a:hover {
color: #2b2626;
}
nav ul li a:hover:before {
width: 95%;
}
.wrapper {
margin-left: 260px;
}
.section {
display: grid;
top: 60px;
min-height: 100vh;
text-align: center;
}
.box-area h2 {
text-transform: uppercase;
font-size: 30px;
}
#myBtn {
position: fixed;
bottom: 20px;
left: 200px;
z-index: 99;
font-size: 8px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
nav ul#my-ul {
scroll-behavior: smooth;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function scrollToTop() {
const el = document.getElementById("my-ul");
el.scrollTop = 0;
}
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<nav id="my-div">
<ul id="my-ul">
<li class="logo"><img src="https://i.imgur.com/E26Pj54.png"></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
</ul>
</nav>
<div class="wrapper">
<div class="section">
<div class="box-area">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<button id="myBtn" onclick="scrollToTop()">Back To Top Question</button>
</script>
</html>

Use below syntax.
function scrollToTop() {
window.scrollTo(0, 0);
}

how to toggle or change HTML class name using JavaScript

I try to change the color of the navigation bar when the theme change button is clicked.
This is HTML code
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>
Javascript code
const themeChange = () => {
const navElements = document.getElementsByClassName("main-nav-link");
// console.log("nav: " + navElements.length);
for (let i = 0; i <= navElements.length; i++) {
console.log(document.getElementsByClassName("main-nav-link")[i]);
document.getElementsByClassName("main-nav-link")[i].className =
"main-nav-link-summer";
}
}
I'm trying to change the class name from "main-nav-link" to "main-nav-link-summer" so the color for active, hover can be changed. But weirdly, only the first and third tags are changed and the second remains the same. The length of the "navElements" variable is 3.
CSS code
.main-nav-list {
list-style: none;
display: flex;
gap: 4.8rem;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link,
.main-nav-link-summer {
text-decoration: none;
display: inline-block;
color: white;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-link-summer:hover,
.main-nav-link-summer:active {
color: #1d4116;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #a63ec5;
}
.sticky {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 8rem;
padding-top: 0;
padding-bottom: 0;
background-color: rgba(255, 255, 255, 0.97);
z-index: 999;
box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
opacity: 0.8;
}
.sticky .main-nav-link {
color: #46244c;
}
.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
color: #a63ec5;
}

in javascript that's the easiest way, for what you wanna achieve I'm not exactly sure.
const navElements = document.querySelectorAll(".main-nav-link");
navElements.forEach((link) => {
link.classList.add("main-nav-link-summer");
});
.main-nav-list {
list-style: none;
display: flex;
gap: 4.8rem;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link,
.main-nav-link-summer {
text-decoration: none;
display: inline-block;
color: white;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-link-summer:hover,
.main-nav-link-summer:active {
color: #1d4116;
}
.main-nav-link:hover,
.main-nav-link:active {
color: #a63ec5;
}
.sticky {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 8rem;
padding-top: 0;
padding-bottom: 0;
background-color: rgba(255, 255, 255, 0.97);
z-index: 999;
box-shadow: 0 100.2rem 3.2rem rgba(0, 0, 0, 0.03);
opacity: 0.8;
}
.sticky .main-nav-link {
color: #46244c;
}
.sticky .main-nav-link:hover,
.sticky .main-nav-link:active {
color: #a63ec5;
}
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>

I'd suggest a different approach all together. Going through and doing mass class name changes is really sub-optimal for dev and maintenance. Perhaps consider an approach like the example below instead as a simple proof of concept using separated css var themes so as you build you don't think about such things and can handle a design system much more flexibly without piling on lots of unnecessary extra code. Cheers.
const htmlEl = document.documentElement;
// set a detault or read their saved selection from localstorage or whatever.
htmlEl.dataset.theme = 'default';
// set the new selectiong when made.
toggleTheme = (theme) => htmlEl.dataset.theme = theme;
html[data-theme="default"] {
--body-bg: #f1f1f1;
--body-color: #000;
--btn-color: #212121;
--btn-bg: #fff;
--btn-hover-color: #a63ec5;
--btn-hover-bg: #ddd;
}
html[data-theme="summer"] {
--body-bg: lightblue;
--body-color: #000;
--btn-color: darkgreen;
--btn-bg: lightyellow;
--btn-hover-color: #1d4116;
--btn-hover-bg: #f1f1f1;
}
html[data-theme="winter"] {
--body-bg: #333;
--body-color: #fff;
--btn-color: #f1f1f1;
--btn-bg: #212121;
--btn-hover-color: lightblue;
--btn-hover-bg: #555;
}
html {
color: var(--body-color);
background-color: var(--body-bg);
}
.main-nav-list {
list-style: none;
display: flex;
align-items: center;
/* padding-right: 5rem; */
/* font-size: x-large; */
}
.main-nav-link {
text-decoration: none;
display: inline-block;
color: var(--btn-color);
background-color: var(--btn-bg);
padding: .25rem 1rem;
border-radius: 5px;
font-weight: 500;
/* font size 1.8 */
font-size: 2.5rem;
transition: all 0.3s;
}
.main-nav-list li:not(:last-child) {
margin-right: 1.5rem;
}
.main-nav-link:hover,
.main-nav-link:active {
color: var(--btn-hover-color);
background-color: var(--btn-hover-bg);
}
<br>
<strong>Choose your theme:</strong>
<select id="mySelect" onchange="toggleTheme(this.value)">
<option value="default">Default</option>
<option value="summer">Summer</option>
<option value="winter">Winter</option>
</select>
<br><hr><br>
<header class="header">
<a href="#">
<img class="logo" alt="logo" src="img/logo.png" />
</a>
<nav class="main-nav" id="main-nav">
<ul class="main-nav-list">
<li>
<a class="main-nav-link" href="#introduction">Intro</a>
</li>
<li>
<a class="main-nav-link" href="#portfolio">Projects</a>
</li>
<li>
<a class="main-nav-link" href="#contact">Hello</a>
</li>
<!-- <li><a class="main-nav-link" href="#">section4</a></li> -->
</ul>
</nav>
</header>

Why my Js is not working in my react page?

I'm trying to implement this https://codepen.io/azouaoui-med/pen/wpBadb as one of my pages inside my react proj. But dropdown doesn't work and couldn't able to close side bar which functions by js. AM not getting any error. But it simply being a static page. How to make it to work? Anybody out there help me to resolve this is issue. Thanks in advance
PS: Am getting the same output as from codepen, not the one which shows down when clicking "Run code snippet"
My output is something like this from my proj and also from code sandbox
My codesandbox for reference : https://5vbl2.csb.app/
Side bar which i tried using with dropdown
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
$("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
$(".page-wrapper").addClass("toggled");
});
#keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
60% {
transform: rotate(5deg);
}
70% {
transform: rotate(0deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes sonar {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
body {
font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*----------------page-wrapper----------------*/
.page-wrapper {
height: 100vh;
}
.page-wrapper .theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.page-wrapper .theme.chiller-theme {
background: #1e2229;
}
/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
#media screen and (min-width: 768px) {
.page-wrapper.toggled .page-content {
padding-left: 300px;
}
}
/*----------------show sidebar button----------------*/
#show-sidebar {
position: fixed;
left: 0;
top: 10px;
border-radius: 0 4px 4px 0px;
width: 35px;
transition-delay: 0.3s;
}
.page-wrapper.toggled #show-sidebar {
left: -40px;
}
/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
/*----------------sidebar-content----------------*/
.sidebar-content {
max-height: calc(100% - 30px);
height: calc(100% - 30px);
overflow-y: auto;
position: relative;
}
.sidebar-content.desktop {
overflow-y: hidden;
}
/*--------------------sidebar-brand----------------------*/
.sidebar-wrapper .sidebar-brand {
padding: 10px 20px;
display: flex;
align-items: center;
}
.sidebar-wrapper .sidebar-brand > a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
}
.sidebar-wrapper .sidebar-brand #close-sidebar {
cursor: pointer;
font-size: 20px;
}
/*--------------------sidebar-header----------------------*/
.sidebar-wrapper .sidebar-header {
padding: 20px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic {
float: left;
width: 60px;
padding: 2px;
border-radius: 12px;
margin-right: 15px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic img {
object-fit: cover;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar-header .user-info {
float: left;
}
.sidebar-wrapper .sidebar-header .user-info > span {
display: block;
}
.sidebar-wrapper .sidebar-header .user-info .user-role {
font-size: 12px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status {
font-size: 11px;
margin-top: 4px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status i {
font-size: 8px;
margin-right: 4px;
color: #5cb85c;
}
/*-----------------------sidebar-search------------------------*/
.sidebar-wrapper .sidebar-search > div {
padding: 10px 20px;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
padding-bottom: 10px;
}
.sidebar-wrapper .sidebar-menu .header-menu span {
font-weight: bold;
font-size: 14px;
padding: 15px 20px 5px 20px;
display: inline-block;
}
.sidebar-wrapper .sidebar-menu ul li a {
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 8px 30px 8px 20px;
}
.sidebar-wrapper .sidebar-menu ul li a i {
margin-right: 10px;
font-size: 12px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
display: inline-block;
animation: swing ease-in-out 0.5s 1 alternate;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-style: normal;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
background: 0 0;
position: absolute;
right: 15px;
top: 14px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
padding: 5px 0;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
padding-left: 25px;
font-size: 13px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-style: normal;
display: inline-block;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 10px;
font-size: 8px;
}
.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
float: right;
margin-top: 8px;
margin-left: 5px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
float: right;
margin-top: 0px;
}
.sidebar-wrapper .sidebar-menu .sidebar-submenu {
display: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
transform: rotate(90deg);
right: 17px;
}
/*--------------------------side-footer------------------------------*/
.sidebar-footer {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
}
.sidebar-footer > a {
flex-grow: 1;
text-align: center;
height: 30px;
line-height: 30px;
position: relative;
}
.sidebar-footer > a .notification {
position: absolute;
top: 0;
}
.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;
}
.badge-sonar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;
}
/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
display: inline-block;
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
.page-wrapper .page-content > div {
padding: 20px 40px;
}
.page-wrapper .page-content {
overflow-x: hidden;
}
/*------scroll bar---------------------*/
::-webkit-scrollbar {
width: 5px;
height: 7px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #525965;
border: 0px none #ffffff;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #525965;
}
::-webkit-scrollbar-thumb:active {
background: #525965;
}
::-webkit-scrollbar-track {
background: transparent;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
background: #31353D;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
border-top: 1px solid #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
border-color: transparent;
box-shadow: none;
}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand>a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
color: #818896;
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
.chiller-theme .sidebar-footer>a:hover i {
color: #b8bfce;
}
.page-wrapper.chiller-theme.toggled #close-sidebar {
color: #bdbdbd;
}
.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
color: #ffffff;
}
.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
color: #16c7ff;
text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
background: #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
color: #6c7b88;
}
.chiller-theme .sidebar-footer {
background: #3a3f48;
box-shadow: 0px -1px 5px #282c33;
border-top: 1px solid #464a52;
}
.chiller-theme .sidebar-footer>a:first-child {
border-left: none;
}
.chiller-theme .sidebar-footer>a:last-child {
border-right: none;
}
<div class="page-wrapper chiller-theme toggled">
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
pro sidebar
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header">
<div class="user-pic">
<img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg" alt="User picture">
</div>
<div class="user-info">
<span class="user-name">Jhon
<strong>Smith</strong>
</span>
<span class="user-role">Administrator</span>
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
<!-- sidebar-header -->
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search...">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<!-- sidebar-search -->
<div class="sidebar-menu">
<ul>
<li class="header-menu">
<span>General</span>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-tachometer-alt"></i>
<span>Dashboard</span>
<span class="badge badge-pill badge-warning">New</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 1
<span class="badge badge-pill badge-success">Pro</span>
</a>
</li>
<li>
Dashboard 2
</li>
<li>
Dashboard 3
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span>E-commerce</span>
<span class="badge badge-pill badge-danger">3</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Products
</a>
</li>
<li>
Orders
</li>
<li>
Credit cart
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="far fa-gem"></i>
<span>Components</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
General
</li>
<li>
Panels
</li>
<li>
Tables
</li>
<li>
Icons
</li>
<li>
Forms
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-chart-line"></i>
<span>Charts</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
Pie chart
</li>
<li>
Line chart
</li>
<li>
Bar chart
</li>
<li>
Histogram
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-globe"></i>
<span>Maps</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
Google maps
</li>
<li>
Open street map
</li>
</ul>
</div>
</li>
<li class="header-menu">
<span>Extra</span>
</li>
<li>
<a href="#">
<i class="fa fa-book"></i>
<span>Documentation</span>
<span class="badge badge-pill badge-primary">Beta</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-folder"></i>
<span>Examples</span>
</a>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
<!-- sidebar-content -->
<div class="sidebar-footer">
<a href="#">
<i class="fa fa-bell"></i>
<span class="badge badge-pill badge-warning notification">3</span>
</a>
<a href="#">
<i class="fa fa-envelope"></i>
<span class="badge badge-pill badge-success notification">7</span>
</a>
<a href="#">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<a href="#">
<i class="fa fa-power-off"></i>
</a>
</div>
</nav>
<!-- sidebar-wrapper -->
<main class="page-content">
<div class="container">
<h2>Pro Sidebar</h2>
<hr>
<div class="row">
<div class="form-group col-md-12">
<p>This is a responsive sidebar template with dropdown menu based on bootstrap 4 framework.</p>
<p> You can find the complete code on <a href="https://github.com/azouaoui-med/pro-sidebar-template" target="_blank">
Github</a>, it contains more themes and background image option</p>
</div>
<div class="form-group col-md-12">
<iframe src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=pro-sidebar-template&type=star&count=true&size=small" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=pro-sidebar-template&type=fork&count=true&size=small" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
</div>
<div class="form-group col-md-12">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">New !</h4>
<p>New react pro sidebar library is now available on npm <a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social" />
</a></p>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank" class="btn btn-sm btn-primary mr-2">
Github</a>
<a href="https://azouaoui-med.github.io/react-pro-sidebar" target="_blank" class="btn btn-sm btn-success">
Demo</a>
</div>
</div>
</div>
<h5>More templates</h5>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="card rounded-0 p-0 shadow-sm">
<img src="https://user-images.githubusercontent.com/25878302/58369568-a49b2480-7efc-11e9-9ca9-2be44afacda1.png" class="card-img-top rounded-0" alt="Angular pro sidebar">
<div class="card-body text-center">
<h6 class="card-title">Angular Pro Sidebar</h6>
Github
Demo
<hr>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/angular-pro-sidebar?style=social" />
</a>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/forks/azouaoui-med/angular-pro-sidebar?style=social" />
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="card rounded-0 p-0 shadow-sm">
<img src="https://user-images.githubusercontent.com/25878302/58369258-33f20900-7ef8-11e9-8ff3-b277cb7ed7b4.PNG" class="card-img-top rounded-0" alt="Angular pro sidebar">
<div class="card-body text-center">
<h6 class="card-title">Angular Dashboard</h6>
Github
Demo
<hr>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/lightning-admin-angular?style=social" />
</a>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/forks/azouaoui-med/lightning-admin-angular?style=social" />
</a>
</div>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<div class="mb-2">
<small>
© 2020 made with <i class="fa fa-heart" style="color:red"></i> by - <a target="_blank" rel="noopener noreferrer" href="https://azouaoui.netlify.com">
Mohamed Azouaoui
</a>
</small>
</div>
<div>
<a href="https://github.com/azouaoui-med" target="_blank">
<img alt="GitHub followers" src="https://img.shields.io/github/followers/azouaoui-med?label=github&style=social" />
</a>
<a href="https://twitter.com/azouaoui_med" target="_blank">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/azouaoui_med?label=twitter&style=social" />
</a>
</div>
</footer>
</div>
</main>
<!-- page-content" -->
</div>
<!-- page-wrapper -->
This is the javascript which am uisng

This is how it looks like for me, i can deal with icons but for functionality am helpless.

Adding this here rather than a comment, so that I can show the picture ...
When I go to:
https://codesandbox.io/s/5vbl2?file=/src/App.js:200-335
This is what I see:
The highlighted code just after the start of the Secdoc function is the only bit of jQuery code I can find (and doesn't match what you had in your question); the panel at the bottom left shows the console erros that I keep mentioning.

Dropdown stays in the same place

The problem
Hello!
I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that?
Thanks in advance!
#nav-list {
padding: 0;
margin: 0;
list-style-type: none;
}
.nav-item {
display: inline;
padding: 0;
}
.nav-item-text {
padding: 16px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: context-menu;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link {
padding: 20px;
margin: 0;
font-size: 14px;
font-family: var(--primary-font-stack);
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
display: inline;
color: var(--on-background);
opacity: var(--high-emphasis);
}
.nav-item-link:hover {
opacity: 100%;
cursor: pointer;
transition: .2s ease all;
color: var(--primary);
}
.nav-dropdown {
display: none;
opacity: 0;
position: absolute;
z-index: 99;
margin: 3px 0 0 0;
padding: 15px;
height: auto;
min-width: 280px;
background: var(--background);
border-radius: 4px;
border: 2px solid var(--elevation-16dp);
}
.nav-item:hover .nav-dropdown {
display: block;
transition: .2s ease all;
opacity: 100%;
}
<ul id="nav-list">
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title A 1</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
<li class="nav-item">
<p class="nav-item-text">Dropdown Trigger</p>
<ul class="nav-dropdown">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title B 2</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
<hr class="nav-drpdwn-hl">
<li class="nav-drpdwn-item">
<p class="nav-drpdwn-item-title">Title</p>
</li>
<a class="nav-drpdwn-item-link" href="#">
<li class="nav-drpdwn-item">Link</li>
</a>
</ul>
</li>
</ul>

You have to add this css to your code:
<style>
#nav-list > li {
position:relative;
}
#nav-list .nav-dropdown {
left: 0;
}
</style>

li menu title hides when hovering over child ul sub menu

I am in the process of building this dashboard the problem is when i hover over the li in the sidebar then the sub menu shows but when I take the cursor away from the menu title to the submenu ul then the heading disappears.
Test the code after expanding the window size to full. I have marked the code which is responsible for showing menu on hover with the title "Code Responsible for showing menu on hover"
Also i cant get rid of that black mark over the title
https://i.imgur.com/TVnKPMG.png
var toggler = document.querySelector('.toggler');
var minWidth768 = window.matchMedia("(min-width: 768px)");
var maxWidth767 = window.matchMedia("(max-width: 767px)");
var bdy = document.querySelector('.bdy');
toggler.addEventListener("click", function() {
if(minWidth768.matches) {
bdy.classList.toggle('sidebar-collapse');
} else if(maxWidth767.matches) {
bdy.classList.toggle('sidebar-expand');
}
});
var treeview = document.querySelectorAll(".treeview > .treeview-menu");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
treeview[i].parentNode.addEventListener("click", function(ev) {
ev.preventDefault();
this.classList.toggle("menu-open");
for (var x=0; x<treeview.length; x++){
submenu[x].addEventListener("click", function(e) {
e.stopPropagation();
})
}
});
}
/*HEADER*/
* {
transition: all 300ms linear;
}
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
}
.main-header .logo {
display: block;
float: left;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
width: 230px;
padding: 0 15px;
font-weight: 300;
background: #7f224f;
overflow: hidden;
color: #fff;
}
.main-header .navbar {
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
background: #9b265f;
}
.toggler {
margin-top:10px;
font-size: 20px;
color: white;
cursor: pointer;
margin-left: 10px;
}
.logo-mini {
display: none;
}
/*SIDEBAR*/
#main-sidebar{
position: absolute;
top: 0;
left: 0;
padding-top: 70px;
min-height: 100%;
width: 230px;
z-index: 810;
background: #222d32;
}
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
}
.user-p-image img {
width: 100%;
max-width: 50px;
height: auto;
}
.user-panel .info {
padding: 5px 5px 5px 15px;
line-height: 1;
position: absolute;
left: 55px;
color: #fff;
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0;
}
.sidebar-menu li.header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226;
}
.sidebar a {
color: #b8c7ce;
text-decoration: none;
}
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
background: #111618;
margin: 6px 0;
}
/*SIDEBAR TOGGLE CODE*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .main-header .logo {
width: 50px !important;
}
.bdy.sidebar-collapse .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-collapse .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-collapse .main-header .navbar {
margin-left: 50px;
}
.bdy.sidebar-collapse #main-sidebar {
width: 50px !important;
}
.bdy.sidebar-collapse #content-wrapper {
margin-left: 50px;
}
}
#media (max-width: 767px) {
.main-header .logo {
width: 0px;
}
.main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.main-header .logo > .logo-lg {
display: none;
}
.main-header .navbar {
margin-left: 0px;
}
#main-sidebar {
width: 0px !important;
padding-left: 0px !important;
overflow: hidden;
}
#content-wrapper {
margin-left: 0px !important;
}
.bdy.sidebar-expand .main-header .logo {
width: 230px;
}
.bdy.sidebar-expand .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-expand .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-expand .main-header .navbar {
margin-left: 230px;
}
.bdy.sidebar-expand #main-sidebar {
width: 230px !important;
}
.bdy.sidebar-expand #content-wrapper {
margin-left: 230px;
}
}
/*END OF TOGGLE CODE*/
/*LIST TOGGLE*/
.treeview-menu {
display: none;
}
.treeview.menu-open .treeview-menu{
display: block;
}
/*END OF LIST TOGGLE*/
/*Code Responsible for showing menu on hover*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .sidebar-menu > li > a > span,
.bdy.sidebar-collapse .sidebar-menu > li > .treeview-menu {
display: none !important;
}
.bdy.sidebar-collapse .sidebar-menu > li > a:hover span {
display: block !important;
position: absolute;
top: 0;
width: 180px;
background: #111618;
padding: 12px 0;
left: 49px;
z-index: 99999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover .treeview-menu {
display: block !important;
background: grey;
position: absolute;
width: 180px;
left: 49px;
z-index: 999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
position: relative !important;
float: right;
width: auto !important;
left: 180px !important;
top: -22px !important;
z-index: 900;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
top: 44px;
margin-left: 0;
}
}
/*CONTENT*/
#content-wrapper {
padding: 15px;
margin-left: 230px;
min-height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bdy">
<div class="wrapper">
<header class="main-header">
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>K</b>Ame</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Ame</b>Xub</span>
</a>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="toggler"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dinesh Thapa <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</header>
<div id="main-sidebar">
<div class="sidebar">
<div class="user-panel">
<div class="pull-left user-p-image">
<img src="user.jpg" class="img-circle">
</div>
<div class="pull-left info">
<p>Dinesh Thapa</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class='nme'>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>dsdssdd</span>
</a>
</li>
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="row">
<h1>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
</div>
<footer style="position: absolute; bottom: 0;">
copyright
</footer>
</div>
</div> <!-- wrapper -->
</div> <!--bdy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
https://jsfiddle.net/nd9ky5x2/

We Keep Coding

JavaScript is the programming language of the Web.

Side navigation with top, bottom, and overflow - javascript

Related

Load Content in div without refreshing whole page

how to toggle or change HTML class name using JavaScript

Why my Js is not working in my react page?

Dropdown stays in the same place

li menu title hides when hovering over child ul sub menu

Categories

Resources