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.
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'm currently making my first website with Html, and javascript as the front end will come first.
I am trying to create a Collapse Sidebar which appears when I click the button on the right hand side of the top-nav but I have a problem with the transition effect as it will push the everything to the right hand side but in doing so the image does not show up and the top nav is not covering the top but rather a bit below the top of the page how can this be fixed?
I have taken away the <div id="main"> and in doing so the background-image reappears and the top nav is covering the top of the page where a top nav should be however the sidebar now covers apart of the page instead of moving it to the right.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
#main {
transition: margin-left .5s;
padding: 20px;
}
.bgimg_1 {
position: relative;
opacity: 1.0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sidebar{
backfround-color: red;
}
.bgimg_1{
background-image:
href("https://cdn.athemes.com/wp-content/uploads/Original-JPG-Image.jpg");
min-height: 100%;
}
<div id="main">
<div class="topnav">
Reids Hub
<button class="openbtn" class="tips" onclick="openNav()">☰</button>
</div>
<div id="mySidebar" class="sidebar">
×
What started all of this.
About me.
Projects.
Contacts.
</div>
<div class="bgimg_1">
<div class="caption">
<span class="border">SCROLL DOWN</span>
</div>
</div>
</div>
I expected for the everything to go right and it does but I also expected for the image to transition the rest of the page in fact the image disappears.
Invalid Syntax
background-image correct syntax is:
background-image: url(http://host.top/path/to/img.jpg);
Layout
Also, if you want a background that covers the entire viewport (fancy word for screen), put it in a parent element commonly it's body, If that was your intention then remove .Bg_img1. The whole thing. Add the following styles to body (see Demo 1):
body {
font-family: "Lato", sans-serif;
background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
If you prefer to keep the background-image on the right side, then instead of the body add this to #main(see Demo 2):
#main {
background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: margin-left .5s;
padding: 16px;
color: #fff;
min-height: 100vh;
}
Demo 1
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;
background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.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;
color: #fff;
}
#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>
Demo 2
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 {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
background-image: url(https://3jbq2ynuxa-flywheel.netdna-ssl.com/wp-content/uploads/2018/07/pasted-image-0-19.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: margin-left .5s;
padding: 16px;
color: #fff;
min-height: 100vh;
}
#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>
I have the following page as part of a prototype for a Web Application that I'm building, and I would like to know if there's any approach (using just CSS or JS), in order to avoid text wrapping of the paragraphs from my off-canvas menu.
I'm quite "green" on building this sort of menus and I achieved the current results with this prototype, thanks to an example from W3Schools.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #ff0000;
overflow-x: hidden;
transition: 0.6s;
padding-top: 180px;
}
.sidenav a {
padding: 10px 0px 10px 35px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
transition: 0.5s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #a6a6a6;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 0px;
font-size: 35px;
margin-right: 20px;
}
#main {
transition: margin-left 0.6s;
padding: 26px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
Customers
Pupils
Teachers
<!-- Try to separate the word ""AndroidNotices" and you'll see... -->
AndroidNotices
</div>
<div id="main">
<h2>Off-Canvas Menu</h2>
<p>Click on button to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Menu</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "200px";
document.getElementById("main").style.marginLeft = "200px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
If I understood you correctly, you need to set the style white-space: nowrap for the paragraph (<p>) element, to prevent text wrapping ...
p {
white-space: nowrap;
}
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>
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.