Eliminate a class by simply clicking on any section of the screen

I've created a dynamic "side-navigation" feature that can be hidden and shown (sliding from the right) by clicking on a specific icon. The functionality is implemented using an onclick function. Now, I'm looking to add a feature that allows the menu to close when users click anywhere outside of the div.

Here's my current code:

function show(){
    document.getElementById('menu-layout').classList.add('active')
    document.body.style.backgroundColor = "#7F7F7F";
};
function hide(){
    document.getElementById('menu-layout').classList.remove('active')
    document.body.style.backgroundColor = "white";
}

https://i.sstatic.net/YhuKz.png

Answer №1

To create a side navigation, place it within a container div that serves as an overlay with zero visibility. The container div should occupy the entire viewport, allowing you to attach click event listeners directly to it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A versatile CSS solution for fixed background images that stretch to fit any screen height across multiple browsers

Similar Question: Stretch and Scale CSS Background I am interested in finding a method to create a background with specific criteria: - remain fixed in place - adjust proportionally based on the window's height - work across all browser types or ...

- "Is it possible to extract values from an optional variable?"

Is there a method to access individual variables from the data returned by the reload method? let reloadProps: ReloadProps | undefined; if (useClientSide() === true) { reloadProps = reload(props.eventId); } const { isTiketAdmin, jwt, user ...

Could you provide guidance on how to toggle the visibility of a div using the click event of a button or link located on a different HTML page in Angular?

Is there a way to change the visibility of a div on a different page when a button or link is clicked? For example, I have a button on the "main.html" page that, when clicked, should display a hidden div on the "header.html" page. How can I achieve this? ...

Tips for utilizing onclick in React Threejs with a loaded GLTF model

After loading the GLTF file successfully and admiring its appearance, a desire arises to interact with it by clicking on it and extracting specific information, such as a uuid. However, upon attempting this interaction, an error is triggered stating "TypeE ...

What is the best way to add a simple Search bar to the Material UI Data Grid component?

If we take a look at this data grid example: check it out here I'd like to incorporate a simple search bar similar to the one shown here Can someone provide guidance on how to add this feature to Data Grid MUI? ...

Pass information from a child component to a parent component within a React.js application

Using the Semantic-UI CSS Framework, I have implemented a dropdown menu and want to be able to select an item from it and identify which item has been selected. While I can determine the selected item within the child component and set its state, I am faci ...

Executing a Django AJAX redirect after submitting a form

My aim is to retrieve data using an ajax request upon form submission. I intended to utilize two views - one for handling template loading and the other for processing the POST request from the form. Currently, the form redirects to the JSON in the callbac ...

"Learn how to use pure JavaScript to show the output of a PHP file on a webpage

I created a basic PHP file named hello.php that shows a 'hello world' message as follows: <?php echo "Hello world!"; ?> Now, I am looking to store this message in a JavaScript variable. How can I achieve this? <script type="tex ...

Sidebar Masonry - Use Bootstrap for a Unique Layout

My goal is to have the page divided into 4 rows, with Masonry aligning the posts within 3 rows and a sidebar displayed on the right. However, I am facing an issue where Masonry mixes everything up and does not allow me to have a sidebar at the right. HTML ...

Positioning a Box tag at the bottom using MUI 5

My goal is to position a Box tag at the bottom of the page. Current Behavior: https://i.stack.imgur.com/ZupNo.png I am looking to place a TextField and send button at the bottom of the page on both browser and mobile. I want user messages to be above th ...

Has the default underline in Bootstrap 5 been altered?

When working with Bootstrap 4, I noticed that it sets the default text-decoration to be none. However, in Bootstrap 5, just adding a regular anchor tag results in both blue text and an underline being displayed. I was trying to achieve only showing the u ...

Click on the child element while it is already being clicked by manually implementing the 'declick' function in Javascript

Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself. Problem I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when ho ...

The remote rule in the jQuery Validate plugin does not return a boolean value

Is there a way to call a servlet using a remote field in jQuery validator to check if an already inserted username exists? The challenge is that the call needs to be made using JSONP, and the response is not a boolean or string but a JSON object with possi ...

Trouble arises when attempting to showcase document fields in MongoDB

As a beginner in programming, I am putting in my best effort to figure things out on my own. However, I seem to be stuck without any guidance. I am attempting to display all products from the mongoDB based on their brand. While I have successfully set up a ...

Is using an interval the best method to ensure that an Ajax call has finished successfully?

I have a scenario with two input text fields and a save button. <input type="text" id="myInput" /> <input type="text" id="searchResult"/> <button id="myButton>save</button> The myInput t ...

External JavaScript functions remain hidden from the HTML page

Having issues with JavaScript functions. I created functions in a separate file named index.js, but when I use them in index.html like "onclick = function()", the file doesn't recognize the function. <!doctype html> <html lang="{{ app()-> ...

Clicking the checkbox in IE9 to activate its function

Strange Behavior of Click Function in Internet Explorer: I have noticed that when you click a checkbox multiple times, it does not always get checked or unchecked as expected. However, the click function still triggers. This issue was observed in IE8 as we ...

Utilizing JavaScript to call functions from an ASP.NET code file

I am in need of assistance with integrating a JavaScript-based timeline that requires data from an SQL server. I have already developed the queries and JSON conversions using C#.NET functions within a code file associated with an .aspx page. As a newcomer ...

If the selected tab matches, collapse it using jQuery

When utilizing the jQuery accordion, I am looking to collapse if the currently active tab is selected. If I click on the same tab again, nothing happens. However, if I click on another tab, the activated tab changes accordingly. Check out an example on j ...

Enhance your content with stylish text additions

Can anyone help me with merging 2 pieces of text in React JS, where one part of the text has unique styling? Below is an example of the code: <div> <div> {'If you haven\'t received an email, please check your spam filte ...