I need to create a sidebar that can be able to close it clicking on the X button and clicking anywhere
I am able to close the navbar by clicking on the X button in the sidebar. How can I change my javascript to be able to close the sidebar by clicking anywhere on the page?
function openNav() {
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
</body>
You can listen to clicks on your entire page through:
document.body.onclick = function () {
// Close Nav here
}
However, doing this will cause your entire page to try to close the nav when clicked – even your open button.
You can exclude certain elements from listening to events set on parent elements through the e.stopPropagation() method. See an example implementation below.
Please also note that your body will not start off 100% of your window's height due to the lack of content, and thus will not respond to clicks everywhere on the page. You can fix this by using setting the CSS property body: 100vh.
function openNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="250px";
}
function closeNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="0"
}
document.body.onclick = closeNav;
document.getElementsByClassName('openbtn')[0].onclick = openNav;
document.getElementById('mySidenav').onclick = openNav;
document.getElementsByClassName('closebtn')[0].onclick = closeNav;
body {
height: 100vh;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover {
color: #F1F1F1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" class="openbtn">cart</span>
</body>
Easily you can add overlay element when the sidebar is shown.
function overlay(isShow){
var elm = document.getElementById('overlay')
if (isShow) {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
}
function openNav() {
overlay(true);
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
overlay(false);
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#overlay{
z-index: 2;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
<div id="overlay" onclick="closeNav()"></div>
Related
I want to stop child elements from wrapping when animating. I want that they should stay as it is and not dance on the screen by wrapping. Here is my jsfiddle:
https://jsfiddle.net/DTcHh/39734/
This is my 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;
}
.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;}
}
Do you know how could I potentially fix this?
Edit: I don't want hacks by compulsorily aligning all content in my sidenav as display:block
Here is the updated fiddle: https://jsfiddle.net/DTcHh/39738/
I want the UL to show up inline-block. Is this possible?
Display block on your anchors should do it.
#media screen and (max-height: 450px)
(index):82
.sidenav a {
font-size: 18px;
display: block;
}
Edit - following comments
Further to the OP's requirements where the anchors should stay inline and not 'dance' I animated the position of the sidebar instead of the width.
function openNav() {
document.getElementById("mySidenav").style.left = "0";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}
You just need to add display:block to the anchor's style
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display:block; //this is added
}
Or you can add it those which are direct descendants of .sidenav
.sidenav > a {
display:block; //this is added
}
Demo for I don't want hack
document.getElementById("open").onclick = openNav;
document.getElementById("close").onclick = closeNav;
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "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;
}
ul {
display: block;
white-space: nowrap;
}
ul li {
display: inline-block;
}
.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;
}
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="mySidenav" class="sidenav">
<ul>
<li>I</li>
<li>don't</li>
<li>want</li>
<li>hack</li>
</ul>
×
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">☰ open</span>
Edit
Just add this line to your ul's css
ul {
white-space: nowrap;
}
So I'm coding a website for school. I have coded a side menu that has options that you click. And I've also coded some of those things that you click. My problem, is even though they exist, it says "filler.html does not exist." when I click. Even though they exist. So, here's my code. If you have any further questions, ask away.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
font-family: "Lato", sans-serif;
}
.ABox {
background-color: black;
color: lightgrey;
width: auto;
padding: 1%;
}
.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;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
<br>
The beginning of logic and rhetoric
What is rhetoric?
What is classics?
<a href="/timeline.html" Timeline</a>
</div>
<div class="ABox">
<h2>Classics and Rhetoric</h2>
</div>
<p style="background-color:black;color:lightgrey;width:200px;padding:1%;"></p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
Try removing the leading "/". This means absolute directories, when you want relative.
The beginning of logic and rhetoric
What is rhetoric?
What is classics?
Timeline
Replace:
From:
<a href="/timeline.html" Timeline</a>
To:
Timeline
I got a little slider with a black background with
opacity: 0.6
This is an external index.html (with a CSS, JS and img folder).
I'd like to open that index.html when i hit a link on an external page. So the page is just covered with that black overlay and the slider.
Do I have to do this with an iframe, which fades in? So like:
$(document).ready(function () {
$('#mylink a').click(function(){
var iframeSrc = $(this).attr('href');
$('#myiFrame').fadeOut(1000,function(){
$('#myiFrame iframe').attr('src',iframeSrc);
$('#myiFrame').fadeIn(1000);
});
return false;
});
});
Or is there any easier solution? The little problem is that I have to be able to write the text in a HTML-editor only, because where I got that link to open the slider is in a CMS with a HTML-Editor.
If I got u correctly-
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<iframe src="http://www.w3schools.com/"></iframe>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
I found this Sidenav on the internet which I would like to use for my application! Link to this: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_none
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
display: none;
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
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;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>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.display = "block";
}
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
But, the sidenav only opens when the button is activated, but I would like it to be open by default. What syntaxes would I need to change for this?
All you need to do is remove the css that is hiding the sidenav by default
.sidenav {
//display: none; - remove this line
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
}
If I try to make icon go up using margin top : -35px; under #menu, when I click on it the icon side navigation doesn't work ,but when i give upto -15px the side navigation bar gets displayed. I am not able to figure out the mistake!
Thanks in advance!
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
#menu{
float: right;
margin-top: -15px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
opacity:0.5;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 90px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #808080;
}
.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;}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="material-icons material-spec-icon" title="Show navigation">menu</i></span>
<div id="mySidenav" class="sidenav">
×
About
Services
Process
Portfolio
</div>
Try changing the display from block to inline on your a tags:
.sidenav a {
display: inline;
}
Then you can remove the margin top.