We Keep Coding

How to close the side bar automatically when the li item is clicked

How do I close the side bar when someone clicks on the any of the li element. I have tried the code menuSidebar.display = "none" in the event listener, but this doesn't seem to work
Thank you in advance
const menuButton = document.querySelectorAll("li");
const menuSidebar = document.getElementById("mySidebar");
/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
// console.log(menuButton)
// console.log(mySidebar)
menuButton.addEventListener("click", ()=>{
menuSidebar.display = "none";
});
:root {
--title-font: "Titillium Web", sans-serif;
--color-primary: #16e0bd;
--color-secondary: #303030;
--color-tertiary: #e0860b;
--color-complimentary: #fc5817;
--color-darkblack: #141414;
--default: #ffffff;
}
.sidebar {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: var(--color-secondary); /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: var(--default);
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
color: var(--color-primary);
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The button used to open the sidebar */
.openbtn {
font-size: 20px;
cursor: pointer;
padding: 10px 15px;
border: none;
box-shadow: 3px 3px var(--color-complimentary),
-0.1em -0.1em 0.4em var(--color-complimentary);
background: linear-gradient(var(--default), var(--color-primary));
color: var(--color-secondary);
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left 0.5s; /* If you want a transition effect */
padding: 20px;
}
<div id="mySidebar" class="sidebar">
×
<ul>
<li>About Me</li>
<li>Skills</li>
<li>Projects</li>
<li>Experience</li>
<li> Education </li>
<li> Contact</li>
</ul>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ Open Menu</button>
</div>

menuButton.addEventListener("click", ()=>{
menuSidebar.display = "none";
});
Replace the above with this,
menuButton.forEach((button) => (button.onclick = () => closeNav()));
You have listen to each button to see if it's been clicked then simply execute closeNav() function

On dropdown click, sidebar needs to get taller

Currently I have a sidebar that has a dropdown feature. When the dropdown gets clicked, I would like the height of my sidebar to increase. In the JavaScript I have a loop that toggles through the buttons so they can show/hide. In CSS I have a defined height of 60% that would ideally go to 80% when the dropdown menu is clicked. In HTML I just have the links for the sidenav.
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
/* Fixed sidenav, full height */
.sidenav {
height: 60%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>

Maybe I'm misunderstanding what you're trying to do. But if you just want the height of the sidenav element to go to 80% when the dropdown is open, you could just select the element and set the height using the style property:
var dropdown = document.getElementsByClassName("dropdown-btn");
// Select sidenav element
var sidenav = document.getElementsByClassName("sidenav")[0];
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
// Dropdown closed, sidenav height is 60%
sidenav.style.height = "60%";
} else {
dropdownContent.style.display = "block";
// Dropdown open, sidenav height is 80%
sidenav.style.height = "80%";
}
});
}
/* Fixed sidenav, full height */
.sidenav {
height: 60%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
/* Style the sidenav links and the dropdown button */
.sidenav a,
.dropdown-btn {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.sidenav a:hover,
.dropdown-btn:hover {
color: #f1f1f1;
}
/* Main content */
.main {
margin-left: 200px;
/* Same as the width of the sidenav */
font-size: 20px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
/* Add an active class to the active dropdown button */
.active {
background-color: green;
color: white;
}
/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
/* Optional: Style the caret down icon */
.fa-caret-down {
float: right;
padding-right: 8px;
}
<div class="sidenav">
About
Services
Clients
Contact
<button class="dropdown-btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
Link 1
Link 2
Link 3
</div>
Search
</div>

collapsible sidebar.....want to fix the header and footer part of sidebar

On my web page sidebar appears when clicked upon a particular icon.In the sidebar-footer there is a text box whose input runs on a particular php page and output gets printed on sidebar-main. I want to fix the sidebar-header and sidebar-footer relative to sidebar (i.e., when sidebar is active).Only sidebar-main should scroll when content grows. As of now whole sidebar scrolls. Thank you in advance!
#bot {
position: fixed;
bottom: 50;
left: 10;
cursor: pointer;
}
.overlay {
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
display: none;
/* middle layer, i.e. appears below the sidebar */
z-index: 9998;
}
#sidebar {
width: 350px;
position: fixed;
top: 0;
left: -350px;
height: 100vh;
z-index: 999;
background: linear-gradient(to left, #26a0da, #314755);
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
position: absolute;
top: 10;
right: 20;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.glyphicon.glyphicon-remove {
font-size: 20px;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
display: none;
}
#sidebar .sidebar-header {
width: 350px;
padding: 20px;
top: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
position: absolute;
}
#sidebar .sidebar-menu {
width: 350px;
padding: 20px;
text-align: center;
#position: fixed;
}
#sidebar .sidebar-footer {
width: 350px;
padding: 20px;
bottom: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
#position: fixed;
<div class="wrapper">
<nav id="sidebar">
<!-- Close Sidebar Button -->
<div id="dismiss">
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Sidebar-Header</h3>
</div>
<!-- Sidebar Main -->
<div class="sidebar-main">
<div id="result"></div>
<!-- Result comes from javascript part -->
</div>
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<div id="message-box" class="col-md-5 col-md-offset-3">
<input type="text" id="message" name="message" value="" placeholder="Messages" />
</div>
</div>
</nav>
<div id="sidebarCollapse">
<img src="icon2.png" id="bot">
</div>
<div class="overlay"></div>
</div>

You may need to simplify your code to avoid including elements that are not part of the question (like the sidebar's "active" class), as your snippet doesn't actually show anything. Also using a relative path for an image on a snippet doesn't really work.
On the other hand, it is not clear if your sidebar's header and footer are meant to be fixed height or not (or the whole sidebar). In the first case, it can be handled with CSS alone as seen in this snippet.
You may want to add a container for your menu and set a fixed height for that container (screen size - header height - footer height).
HTML
<nav id="sidebar">
<div class="sidebar-header">
<!-- Header content -->
</div>
<div class="sidebar-menu">
<div class="menu-container">
<!-- Menu content -->
</div>
</div>
<div class="sidebar-footer">
<!-- Footer content -->
</div>
</nav>
CSS
#sidebar {
width:350px;
position:fixed;
left:0;
top:0;
height:100vh;
}
.sidebar-header {
height:100px;
position:relative; /* doesn't need to be absolute */
width:100%
}
.sidebar-footer {
height:100px;
position:absolute; /* the footer goes to the bottom */
bottom:0;
left:0;
width:100%
}
.menu-container {
height: calc(100vh - 200px); /* screen height - header height - footer height */
overflow: auto; /* this makes your container div to scroll if the content's overflowing */
}
If you want automatic heights for the footer or header of the sidebar (which I don't recommend), then you should set the sidebar's header and footer height from javascript and then calculate the menu container's height and set it from code.

How to make hidden sidebar display on hover

So, I have Sidebar that hidden and shows up if I click a button to open it up.
this is on html:
<div id="mySidenav" class="sidenav">
×
Home
About
News
Contact
</div>
this is on css:
/* The side navigation menu */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 20px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
this is javascript code:
<script type="text/javascript">
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("contoh").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("contoh").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
</script>
my question is, how to change the button Open, to be on hover and display the full sidebar. Just like in sidebar from this web: https://la24.org/games-concept many thanks before.

#OP, Yes you have to put some width on your navbar. Just like how the navbar in the link you provided. No need to use JavaScript to open it. You can do it with simple CSS:
.sidenav {
height: 100%;
width: 50px; /* Put some width to hover on. */
}
/* ON HOVER */
.sidenav:hover{
width: 250px;
}
/* The side navigation menu */
.sidenav {
height: 100%;
width: 50px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
/* ON HOVER */
.sidenav:hover{
width: 250px;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 20px;
}
<div id="mySidenav" class="sidenav">
×
Home
About
News
Contact
</div>

You can try mouseover method and mouseout method of jQuery to solve this problem.
For example:
$("#mySidenav").mouseover(function(){
//Your code here.
})
and
$("#mySidenav").mouseout(function(){
//Your code here.
})

You can implement using CSS also without writing javascript code. See below the code.
<div class="parent">
<button class="dropbtn">Dropdown</button>
<div id="mySidenav" class="sidenav">
×
Home
About
News
Contact
</div>
</div>
.parent {
position: relative;
display: inline-block;
}
.parent:hover .sidenav {
display:block;
}
In the code mentioned by Dang Khoa, you have to include the button in side navigation or implement the onMouseHover on your button id.

How to change hamburger menu icon when clicked?

Okay so I have a hamburger style menu that uses the normal 3 line icon but I'd like it so when you click it the icon changes to a cross. How would I achieve this? How would I structure the JavaScript?
HTML:
<ul class="navigation">
<li class="nav-item">Home</li>
<li class="nav-item">Meet the team</li>
<li class="nav-item">Blog</li>
</ul>
<input type="checkbox" id="nav-trigger" class="nav-trigger" onclick="menuChange()" />
<label for="nav-trigger"></label>
CSS:
.navigation {
/* critical sizing and position styles */
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
/* non-critical appearance styles */
list-style: none;
background: #000;
}
/* Navigation Menu - List items */
.nav-item {
/* non-critical appearance styles */
width: 200px;
}
.nav-item a {
/* non-critical appearance styles */
display: block;
padding: 1em;
background: linear-gradient(135deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
color: #999999;
font-size: 1.2em;
text-decoration: none;
transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
color: #ffffff;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
position: fixed;
left: 15px; top: 15px;
z-index: 2;
/* non-critical apperance styles */
height: 30px;
width: 30px;
cursor: pointer;
background-image: url(../images/Menu.png);
background-size: contain;
}
/* Make the Magic Happen */
.nav-trigger + label, .site-wrap {
transition: left 0.2s;
}
.nav-trigger:checked + label {
left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
left: 200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
}
Check it out.

I think the better solution is to use an event caused in the collapse menu instead of onclick.
show.bs.collapse - Fired after the show method is called.
shown.bs.collapse - Will wait for CSS transitions to complete
hide.bs.collapse - Fired when the hide instance method has been called.
hidden.bs.collapse - Will wait for CSS transitions to complete
Code look like this:
$('.navigation').on('show.bs.collapse', function() {
// set cross as content of menu button
});
$('.navigation').on('hide.bs.collapse', function() {
// set tree lines as content of menu button
});