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>
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>
Hi I see similar questions but nothing that can help me,
I have a javascript menu, and I want to click outside the menu to close it, right now, you must click the X to close the menu, I want to be able to click anywhere on the page, outside the menu, to close the menu.
<head>
<style>
.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;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
You could listen for clicks and check where the target is, or just create an overlay all over the page, and use a class for the open menu, instead of manually setting the sidenav width:
function openNav() {
document.body.classList.add('sidenav-open');
}
function closeNav() {
document.body.classList.remove('sidenav-open');
}
/* Same as you */.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-color:#111;overflow-x:hidden;transition:.5s;padding-top:60px}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#818181;display:block;transition:.3s}.sidenav a:hover{color:#f1f1f1}.sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}#media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}
#sidenav-overlay {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 100%;
background: rgba(0, 0, 0, .1);
cursor: pointer;
z-index: 1;
}
.sidenav-open .sidenav { width: 250px; }
.sidenav-open #sidenav-overlay { width: 100%; }
<div id="sidenav-overlay" onclick="closeNav()"></div>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
Set up a click event listener on the document and, in the listener, check to see if the actual click came from anything that isn't the menu.
<head>
<style>
.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;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span id="open" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
let sidebar = document.getElementById("mySidenav");
let open = document.getElementById("open");
document.addEventListener("click", function(event){
// If the event didn't originate from the open button or the sidebar, close it
if(event.target !== sidebar && event.target !== open){
closeNav();
}
});
</script>
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;
}
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>