CODEWITHSUNDEEP
javascripthtmlnavigation
Becky G
Becky G

Reputation: 1

Close sliding sidenav by clicking anywhere

I've created a website just as a stupid thing in my free time. Basically, me and my uni house do Disney Sundays where we all get together every Sunday and watch a Disney film. I've managed a generator that generates a random Disney film from a list and now I'm trying to sort out a list of the films we've watched...

Anyway, the website is hosted at http://disneysunday.tk and the piece of script for the sidenav is: In the tag: 

.sidenav { height: 100%; width: 0; position: fixed;z-index: 1; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.sidenav a { padding: 3px 16px 3px 16px; text-decoration: none; font-size: 15px; color: #000000; display: block; transition: 0.3s; }
.sidenav a:hover, .offcanvas a:focus{ color: #72105e; }
.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;} }

and in the body tag: 

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a>List of films each in an a tag</a>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

Everything works right now. However, I would like it so that when I click the button that opens the nav, if I then click anywhere on the page outside of the nav it closes. Or even just the same button. But preferably anywhere on the page!

Thank you for anyone who can help me! And don't worry if you can't because this is just a little side project. :)

Thanks everyone.

Upvotes: 0

Views: 589

Answers (1)

webketje
webketje

Reputation: 10976

you can do this by executing a function on the document, and checking the event target's (e.target) attributes every time a click occurs on the document. If the click occurs on an element inside the nav, it should remain visible unless it's the .closebtn. If the click occurs on an element outside of te nav, it should be hidden, unless it's the .openbtn. (an open button is necessary only if you need to be able to bring the sidenav back up) 

function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
/** This is the code you're interested in **/
document.addEventListener('click', function(e) {
  var snav = document.getElementById("mySidenav");
  if (e.target.id !== snav.id && !snav.contains(e.target) && !e.target.className.match('openbtn'))
    closeNav();
}, false);
.sidenav { overflow: hidden; float: right; width: 250px; background: yellow; height: 400px; }
.sidenav a:not(:link) { display: block; }
<button class="openbtn" onclick="openNav()">Films</button><div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a>List of films each in an a tag</a>
<a>List of films each in an a tag</a>
<a>List of films each in an a tag</a>
<a>List of films each in an a tag</a>
<a>List of films each in an a tag</a>
<a>List of films each in an a tag</a>
</div>

Upvotes: 1

Related Questions