How to close a side bar when i pressed anywhere

Question

What I want to do is to dismiss the sidebar when I press anywhere on the screen.

How can it be done? How can I make it so that when I hover over my image, my text would appear instead of it being visible the whole time?

function openNav() {
  document.getElementById("mySidenav").style.width = "300px";
  document.getElementById("toggle").style.position = "static";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("toggle").style.marginRight = "0";
  document.getElementById("toggle").style.position = "relative";
}

#toggle {
  position: relative;
  left: 400px;
  font-size: 1.2em;
  visibility: visible;
}

#toggle:hover {
  color: white;
  transition: 0.5s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: transparent;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 50px;
}

.sidenav a {
  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;
}

<div>
  <ul id="topBar">
    <li id="ixora">Ixora</li>
    <li class="lists">2014</li>
    <li class="lists">2015</li>
    <li id="toggle" onclick="openNav() ">&#9776;</li>
  </ul>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <span class="textImage">Outing</span>
  <a href="#" class="images"><img src="outing.jpg"></a>

  <span class="textImage">Prom Night</span>
  <a href="#" class="images"><img src="prom.jpg"></a>

  <span class="textImage">PortDickson Trip</span>
  <a href="#" class="images"><img src="pd.jpg"></a>

  <span class="textImage">Merdeka</span>
  <a href="#" class="images"><img src="merdeka%20(2).jpg"></a>
</div>

Answer 1

JQuery

$( document ).onclick(function() {
    $("#mySidenav").hide();
}

Reference documentation:

• JQuery .on
• JQuery .hide

Answer 2

I honestly think you should be using jQuery here as it's fantastic for DOM manipulation. If for some reason you have to use vanilla js then it's going to be a little trickier.

Adding jQuery to your project is easy and well explained on the jQuery site. Here;s a comparison of selecting an element in js/jquery:

Vanilla JS:

document.getElementById("mySidenav")

jQuery:

$('#mySidenav')

To get things to happen when events happen (i.e. button press, or clicking away from a menu) you set up event handlers.

It's hard to picture from your code as there seems to be CSS missing for #topBar so I can't see your site very well (here's your code running in jsfiddle).

But lets say you have a button with ID of #openToggle. You would set up your sideNav in css with the correct width, height, etc, and leave it as display: none. Then we create an event handler to do something when you click that button: //event handlers go at the bottom of your js file or script tag $('#openMenu').on('click', openMenu);

That example is basically saying when the element with ID 'openMenu' is 'clicked' the run the 'openMenu' function - simple! :)

The openMenu function would look something like (basic example):

function openMenu() {
   var $menu = $('#sideNav');
   $menu.show();
};

A better way would be to have a toggle function that toggles the menu based on whether it's already open or closed:

function toggleMenu() {
  var $menu = $('#sideNav');

  if (($menu).is(':visible')) { //if it's visible
    $menu.hide();               //hide the menu
  } else {                      //else it's hidden
    $menu.show();               //so show it
  }
};

// event handler for menu toggle button
$('#menuToggle').on('click', toggleMenu);

With regards to closing the menu when you click away from it, you could bind an event handler to the body of the page and use jQuery's .one() function (runs only once) which will detect if the body is clicked and then run the menuToggle funtion - you'd end up with 2 handlers for this:

// event handler for menu toggle button
$('#menuToggle').on('click', toggleMenu);
$('body').one('click', toggleMenu);

Alternatively you could have the menu close when your mouse pointer leaves the menu?:

//event handlers
$('#menuToggle').on('click', toggleMenu);
$('#sideNav').mouseleave(toggleMenu);

The mouseleave handler is basically saying, once the mouse pointer leaves the element with ID of 'sideNav' then run the toggleMenu function.

I'm a newb too so my examples may not be great, but I hope I helped at least a little. Hopefully some real javascript devs will be along shortly to add to this or give better examples.

Cheers, Dave

Answer 3

With javascript, you can do the following:

document.onclick = function(e){
    if(e.target.id == "mySidenav"){
        return false;
    }

    closeNav();
}

Answer 4

I see that you already have functions to open and close your sidebar,

clicking "anywhere" is the same as "clicking on the body", But I guess that you don't want your sidebar to close when you're clicking on it.

So, here's what you can do :

var myNav = document.getElementById("mySidenav");

myNav.onclick = function(e) {
  e.stopPropagation();
}

document.body.onclick = function(e) {
  closeNav();
}

So, when you click on your sidebar, you won't click on the body because the event propagation is stopped, and when you click elsewhere, it will close your sidebar.

Hope it helps,

best regards