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.
Related
Have a webpage with a simple slide out nav with a semi opaque background. I am not able to get the opaque background to cover my centered logo image (sorry couldn't add image but any image will do) .
I have change the z-index of the elements, giving the image a lower index than the slide over nav but this didn't help.
This is my code:
HTML:
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<img src="assets/images/logo2.png" class="myBrand">
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
css:
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.myBrand img{
z-index: -1;
margin-left:50%;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
z-index: 100;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<!--Javascript-->
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
Any help or suggestions with this would be most appreciated. Thanks:)
NOTE
A small note is that the CSS for your logo/image is set for .myBrand img { } which would imply that the <img> element is a child of another element with the class of myBrand. But the <img> element directly has the class of myBrand and is not a child of it, so you should be using just .myBrand { } to apply the CSS.
SOLUTIONS
The reason your logo shows up over the background is because you are simply applying your 'semi opaque background' effect to the document body, which is behind all elements on the page. It is the parent/container for all elements on the page and so it will not cover up any elements on the page.
This leaves you with two possible solutions. The first would be to actually create an element that has this semi opaque background to cover your page. The second option is to apply some transparency to your logo using the opacity property in CSS. The second option will work, but if you will likely still have issues with other images and elements on the page as well (because there is nothing covering your page, the parent element just got darker).
Solution 1
Here you add a new element that covers the entire page and has your semi opaque background. Initially it is hidden but when you run openNav() and closeNav() it will show or hide this element. Because your nav has its z-index set, it will remain on top of this new element while the rest of your page will be below it.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.querySelector("#cover").style.display = "block"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.querySelector("#cover").style.display = "none"
}
html, body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#cover {
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1;
}
.myBrand {
margin-left:50%;
max-width: 100px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
z-index: 100;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" class="myBrand">
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<div id="cover"></div>
Solution 2
This solution simply alters the transparency of your logo image when the navigation menu is displayed or hidden. However, you will run into the same problem if you have other images or certain elements because you are only changing the background of the <body> and not actually covering the page with anything. It looks like it works with the text because the text is black, but certain <div> elements or other containers with backgrounds and styling will not blend in and will stick out like the logo did.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.querySelector(".myBrand").style.opacity = ".4"
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
document.querySelector(".myBrand").style.opacity = "1"
}
html, body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.myBrand {
margin-left:50%;
max-width: 100px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
z-index: 100;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" class="myBrand">
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
I am working on a bootstrap web site and I have an off-canvas sidebar that I have being pushed in to view and pushes back out when selecting the close icon. It is working okay, but I need to find a way to make it to where it will be 100% width for mobile view. The way the sidebar works, I am unable to do this with just css using media queries because it is using JavaScript to style the width of the side bar when opened. I currently have it set to have a width of 45% when opened, which is what I need for desktop view. However, at mobile view it needs to expand the full width (100%) as the 45% width at that mobile size is not enough. I am new to JS, so I am unsure how to do this with JS. Is there a way to use JS to set the width at a specific resolution breakpoint?
Thanks for any help.
Below is my code:
HTML:
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Button to open side menu</h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
</body>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
JS:
function openNav() {
document.getElementById("mySidenav").style.width = "45%";
document.getElementById("main").style.marginRight = "45%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
The best practice is not trying to manipulate CSS using JavaScript directly. Instead of setting the width to "45%" or "0", you can set classNames:
function openNav() {
document.getElementById("mySidenav").className = "sidenav open";
document.getElementById("main").className = "open";
}
function closeNav() {
document.getElementById("mySidenav").className = "sidenav";
document.getElementById("main").className = "";
}
And add these CSS:
#mySidenav {
width: 0;
}
#main {
marginLeft: 0;
}
#mySidenav.open {
width: 45%;
}
#main.open {
marginRight: 45%;
}
/* on mobile */
#media screen and (max-width: 320px) {
#mySidenav.open { width: 100%; }
#main.open { marginRight: 100%; }
}
Hope it will help.
I want to make a off canvas menu like this but I shall push the text out of the screen and not crop. And I want to add a function that close the menu after I clicked out of it.
I got the code from w3school off canvas menu.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.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: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
Rather than trying to add / remove CSS rules on the click events - try using a single function that adds / removes a class to achieve the opening / closing.
I create an open class that had the styling that you had in the js - then its just a case of adding / removing the class to allow the sidenav to open / close.
This is not how I would suggest to have it - but keeping it in touch with your original code as much as possible - I wrapped the entire thing in a div with an id of wrapper - and then said that on the click of that div (which contains the side nav and the main panel) that if the wrapper has the open class - then remove it (closing the sidenav) and if not - open it.
You will need to look at what you want to trigger the opening - I assume you don't want any click on the entire pain panel opening the side nave - but this should give you an idea on how to get a click outside of the sidenav to close it.
function toggleNav() {
var wrapper = document.getElementById("wrapper");
if(wrapper.classList.contains("open")){
wrapper.classList.remove("open")
} else {
wrapper.classList.add("open");
};
}
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.open #mySidenav {
width:250px;
}
.open #main {
margin-left:250px;
}
.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: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="wrapper" class="" onclick="toggleNav()">
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer">☰ open</span>
</div>
<div>
I'm trying to make a sidebar when you open the bar it will fade out the rest of the page.
<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="Script.js"></script>
</head>
<div id="f8">
<!-- Sidenavigation bar START -->
<div id="UI" class="sidenav">
×
Home
<a href=#>Why Choose WTA?</a>
Curriculum
Calendar
Location (Works)
</div>
<!-- Pushes site to the right -->
<div id="main">
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ More Info</span>
</div>
<body id="bg">
<div class="pootis"></div>
<p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</body>
<!-- Sidenavigation bar END -->
</div>
</html>
CSS:
/* Purple Background */
#bg {background-color:#c58414;
background-image:url(wta.jpg);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Sidenav Menu (ClassIs: UI) */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left; 0;
background-color: #111;
overflow-x: hidden;
padding: 0px;
transition: 0.5s;
}
/* Sidenav Nav UI Links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #313131;
display: block;
transition: 0.4s;
}
/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
color: #f1f1f1
}
/* Position and Style the close button (TRC) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size; 36px;
margin-left: 50px;
}
/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Smaller Screens */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidemav a {font-size 18px;}
}
.moar {
padding-right: 65em
}
.pootis {
background-image: url(z2.png);
height: 425px;
background-repeat: no-repeat;
position: relative;
width: 590px;
margin: auto;
}
.maintext {
background-color:white;
font-size: 19px;
width: 700px;
text-align: center;
position: relative;
margin-left: 550px;
}
.f8 {
height: 100%;
background-size: cover;
}
.text1 {
background-color: whitesmoke;
}
JS:
/* Set the width of the side nav to 250px */
function openNav() {
document.getElementById("UI").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementsByTagName("body")[0];
}
/* Set the width of Sidenav to 0 and left Margin of PC to 0 and bgc 2 fffff */
function closeNav() {
document.getElementById("UI").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "fffff";
}
Help would be greatly appreciated, as It is a school project where we recreate the school landing page. Ofcourse I want to try to do advanced stuff :p, and try to make a nice looking sidebar, Only it's not working. Help?
Edit: I messed up the pasting first so i edited the post to be more readable.
here you go, I got rid of the script tags, just keep the script in your html file.
html:
<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="bg">
<div id="mySidenav" class="sidenav">
×
Home
<a href=#>Why Choose WTA?</a>
Curriculum
Calendar
Location (Works)
</div>
<div id="main">
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ More Info</span>
</div>
<div class="pootis">
<p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
</html>
css you provided:
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.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: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Purple Background */
#bg {background-color:#c58414;
background-image:url(wta.jpg);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Sidenav Menu (ClassIs: UI) */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left; 0;
background-color: #111;
overflow-x: hidden;
padding: 0px;
transition: 0.5s;
}
/* Sidenav Nav UI Links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #313131;
display: block;
transition: 0.4s;
}
/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
color: #f1f1f1
}
/* Position and Style the close button (TRC) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size; 36px;
margin-left: 50px;
}
/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Smaller Screens */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidemav a {font-size 18px;}
}
.moar {
padding-right: 65em
}
.pootis {
background-image: url(z2.png);
height: 425px;
background-repeat: no-repeat;
position: relative;
width: 590px;
margin: auto;
}
.maintext {
background-color:white;
font-size: 19px;
width: 700px;
text-align: center;
position: relative;
margin-left: 550px;
}
.f8 {
height: 100%;
background-size: cover;
}
.text1 {
background-color: whitesmoke;
}
heres a jsfiddle of it working
Put your whole side navigation into a div section with some opacity.
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
$('#menuToggle').find($(".fa")).toggleClass('fa-rotate-180');
$("body").toggleClass("active");
});
this is my javascript code for navigation menu slide form right side.It is working properly but i want to close this menu when once it is open on click or close menu click anywhere on body and toggle button?
There are lots of examples on w3schools, you can use any of them. But what I personally liked was this:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.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: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right. Notice that we add a black see-through background-color to body when the sidenav is opened.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>