How can I close the sidebar with a single tap anywhere outside of it?

Question

How can I close the sidebar with a single tap anywhere outside of it?

Is there a way to hide the sidebar when clicking anywhere on the screen?

Can I show text when hovering over an image instead of having it always visible?

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>

javascript html css

Answer 1

Answer №1

In my opinion, utilizing jQuery for DOM manipulation is the way to go due to its efficiency. However, if you must resort to vanilla JavaScript, the process may become more challenging.

Integrating jQuery into your project is a straightforward task, and you can find detailed instructions on the jQuery site. Here's a comparison between selecting an element in JavaScript and jQuery:

Vanilla JavaScript:

document.getElementById("mySidenav")

jQuery:

$('#mySidenav')

When it comes to responding to events such as button clicks or menu interactions, setting up event handlers is essential.

Without proper CSS styling for #topBar in your code, visualizing your site might be challenging (here's your code running in jsfiddle).

For instance, if you have a button with the ID of #openToggle, you can configure your sideNav in CSS with the required dimensions and visibility set to 'none'. Then, you create an event handler like this:

//event handlers are typically placed at the end of your script
$('#openMenu').on('click', openMenu);

This example indicates that when the element with the ID 'openMenu' is clicked, the 'openMenu' function will be executed.

The openMenu function could be as simple as:

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

Alternatively, a toggle function can be implemented to switch between opening and closing the menu:

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

  if (($menu).is(':visible')) {
    $menu.hide();
  } else {
    $menu.show();
  }
};

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

To close the menu when clicking away from it, you can utilize jQuery's .one() function along with a body click event handler:

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

Another option is to have the menu close when the mouse leaves the menu area:

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

The mouseleave handler triggers the toggleMenu function when the mouse pointer exits the element with the ID 'sideNav'.

As a beginner myself, my examples might not be perfect, but I hope they provide some assistance. Hopefully, experienced JavaScript developers will offer more insights or improved examples soon.

Cheers, Dave

Answer 2

In my opinion, utilizing jQuery for DOM manipulation is the way to go due to its efficiency. However, if you must resort to vanilla JavaScript, the process may become more challenging.

Integrating jQuery into your project is a straightforward task, and you can find detailed instructions on the jQuery site. Here's a comparison between selecting an element in JavaScript and jQuery:

Vanilla JavaScript:

document.getElementById("mySidenav")

jQuery:

$('#mySidenav')

When it comes to responding to events such as button clicks or menu interactions, setting up event handlers is essential.

Without proper CSS styling for #topBar in your code, visualizing your site might be challenging (here's your code running in jsfiddle).

For instance, if you have a button with the ID of #openToggle, you can configure your sideNav in CSS with the required dimensions and visibility set to 'none'. Then, you create an event handler like this:

//event handlers are typically placed at the end of your script
$('#openMenu').on('click', openMenu);

This example indicates that when the element with the ID 'openMenu' is clicked, the 'openMenu' function will be executed.

The openMenu function could be as simple as:

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

Alternatively, a toggle function can be implemented to switch between opening and closing the menu:

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

  if (($menu).is(':visible')) {
    $menu.hide();
  } else {
    $menu.show();
  }
};

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

To close the menu when clicking away from it, you can utilize jQuery's .one() function along with a body click event handler:

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

Another option is to have the menu close when the mouse leaves the menu area:

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

The mouseleave handler triggers the toggleMenu function when the mouse pointer exits the element with the ID 'sideNav'.

As a beginner myself, my examples might not be perfect, but I hope they provide some assistance. Hopefully, experienced JavaScript developers will offer more insights or improved examples soon.

Cheers, Dave

Answer 3

Answer №2

JQuery Events

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

Check out these helpful resources:

Answer 4

JQuery Events

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

Check out these helpful resources:

Answer 5

Answer №3

Utilizing javascript gives you the ability to perform the following actions:

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

    closeNav();
}

Answer 6

Utilizing javascript gives you the ability to perform the following actions:

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

    closeNav();
}

Answer 7

Answer №4

Your sidebar already has functions for opening and closing it. Clicking "anywhere" is essentially the same as clicking on the body, but I understand if you don't want the sidebar to close when clicking on it.

Here's a solution for you:

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

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

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

By implementing this code, clicking on the sidebar will not trigger the body event as we have stopped event propagation. Clicking elsewhere will still close your sidebar as intended.

Hope this explanation is helpful,

Warm regards

Answer 8

Your sidebar already has functions for opening and closing it. Clicking "anywhere" is essentially the same as clicking on the body, but I understand if you don't want the sidebar to close when clicking on it.

Here's a solution for you:

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

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

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

By implementing this code, clicking on the sidebar will not trigger the body event as we have stopped event propagation. Clicking elsewhere will still close your sidebar as intended.

Hope this explanation is helpful,

Warm regards

How can I close the sidebar with a single tap anywhere outside of it?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What could be causing the issue with this flexbox footer not functioning properly on a mobile device?

Error during compilation in npm (symbol '_' is not recognized)

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Vuetify Autocomplete that allows for adding values not in the predefined list

Error: Cannot run yarn dev because node_modules/node/bin/node is missing

From where was this color of the navigation bar derived?

Different methods for incorporating script-specific data into markup

Working with Typescript to map and sort the key values of a new datasource object

Struggling to make vue-i18n function properly with nuxt generate?

Utilizing MongoDB for data transfers: uploading and downloading

Creating a default menu within a specific route in Ember.js is a crucial step in

Consider using React Components as an alternative to implementing pagination dots within Swiperjs, as it may help resolve the issue displaying

What could be the reason for PassportJS in Node failing to clear the session upon logout?

Center and justify image inside flexbox using MUI

passport.js and express: TypeError - Router.use() must be given a middleware function, but instead received a ' + gettype(fn)

Guide to integrating a static page with personalized CSS and JavaScript resources within a Rails project

No response from jQuery's $.getJSON() function

How to prevent table row from highlighting on hover in Angular Bootstrap

Having trouble with your jQuery code not loading properly?

What is the best way to extract the HTML input id using observeEvent in shiny?