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>
Related
I have this code that creates a side menu.
https://jsfiddle.net/oak22424/xy1a4hqe/
And this code which closes the side menu.
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
It is created so when you click the "×" in the side menu, it will close the side pane. How can I add to this the ability to execute the same JavaScript function (called closenav) when you click anywhere but the menu area?
You can wrap the content in a "container" and then assign an event listener ('click')
let doc = document.getElementById('container');
doc.addEventListener('click', () => closeNav());
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 {
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">
<div id="container">
<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>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
You can add a "click" event listener to the part of the document that closes the side menu when the target of the event is neither the open button nor contained within the side menu itself.
document.addEventListener("click", function(e){
if (e.target.id !== "openBtn" && !document.getElementById("mySidenav").contains(e.target)) {
//Note that I added an ID to the open button
closeNav();
}
})
Live Example:
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";
}
document.addEventListener("click", function(e) {
if (e.target.id !== 'openBtn' && !document.getElementById("mySidenav").contains(e.target)) {
closeNav();
}
})
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 {
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 id="openBtn" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
Create backdrop that spans the whole screen, when the sidenav is open, hide it when sidenav is closed, then listen to click events on it.
So it would be something like this:
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("backdrop").style.display = 'block'
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
document.getElementById("backdrop").style.display = 'none'
}
window.onclick = (event) => {
let backDrop = document.getElementById('backdrop');
if (event.target == backDrop) {
closeNav();
}
}
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 {
color: #f1f1f1;
}
#backdrop {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.7);
}
.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;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<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>
</body>
</html>
You can create a mouse click listener and if the menu is showing and the mouse-x position is greater than the sidebar's rightmost point (dynamically calculated by div position, clientX, and width) then it calls the same javascript function you've already written to close.
Just put this code into your JavaScript, and I have the same sidebar on my website too, lol. w3Schools squad.
window.onclick = function(event) {
if (event.target == mysidenav) {
mysidenav.style.display = "none"; // Choose Either display:none; or Closenav()
closenav(); // Choose Either CloseNav() or display:none; I recommend closenav()
}
}
Hello Im trying to create a sidebar for a website of mine that that has open/close button that moves along with it.
I am basing my code this example of w3school in the example there are two separate buttons for opening and closing. I dont like having two separate buttons for the task and would like to combine them. So i modified the example to this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidebar {
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;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.openbtn {
font-size: 20px;
cursor: pointer;
position: fixed;
bottom: 50%;
left: 0;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
z-index: 1;
transition: 0.5s;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
<script>
var lastState = false;
function sideButtonClicked() {
if(!lastState){
//open
lastState=true
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("sidebarButton").style.left = "250px";
}
else{
//close
lastState=false
document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft= "0px";
document.getElementById("sidebarButton").style.Left = "0px";
}
}
</script>
</body>
</html>
If you try running the code the when you click the button for the first time, the sidebar opens and the button goes along with it. That is great and what i wanted it to do, The problem is when closing the sidebar the button does not go back to its original position. The sidebar opens and close no problem but it would seem that this line of code is not working
document.getElementById("sidebarButton").style.Left = "0px";
Any idea how to fix it?
Although style properties are case-insensitive inside of stylesheets, the JavaScript API for styles is case-sensitive. Therefore, setting style.Left won't work since the correct property name is left.
document.getElementById("sidebarButton").style.left = '0';
You have a typo mistake document.getElementById("sidebarButton").style.Left should be document.getElementById("sidebarButton").style.left
var lastState = false;
function sideButtonClicked() {
if (!lastState) {
//open
lastState = true
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.getElementById("sidebarButton").style.left = "250px";
} else {
//close
lastState = false
document.getElementById("mySidebar").style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
document.getElementById("sidebarButton").style.left = "0px";
}
}
body {
font-family: "Lato", sans-serif;
}
.sidebar {
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;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.openbtn {
font-size: 20px;
cursor: pointer;
position: fixed;
bottom: 50%;
left: 0;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
z-index: 1;
transition: 0.5s;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
<div id="mySidebar" class="sidebar">
About
Services
Clients
Contact
</div>
<div id="main">
<button id="sidebarButton" class="openbtn" onclick="sideButtonClicked()">☰</button>
<h2>Collapsed Sidebar</h2>
<p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
</div>
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.
$('#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>