Sidenav Content with all elements having opacity applied

How can I ensure that all page elements have a black background color when the mobile navigation is opened on the left screen, while ensuring that my sidebar and content image do not get overlaid by the black background? Here is my code:

 function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.7)";

 
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.body.style.backgroundColor = "white";

}

javascripthtmlcsswordpress

Answer №1

Your code is functioning correctly. However, achieving what you desire cannot be done in the way you attempted. What you actually need is an overlay. To create this, define a pseudo-element on your body tag and apply the background to it. This approach will work effectively. Just remember to pay attention to the z-value to ensure that your navigation remains on top!

$('#toggle-menu').on('click', function() {
  $('.overlay').toggleClass('show')
})
.header,
.content,
.footer {
  padding: 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid black;
}

.overlay:after{
  content: '';
  display: none;
  position: absolute;
  background: rgba(0,0,0,0.7);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.overlay.show:after {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="overlay"></div>
  <div class="header">
    Header
  </div>
  <div class="content">
    Page content
  </div>
  <div class="footer">
    Footer
  </div>
  
  <button id="toggle-menu">Click me!</button>
</body>

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

What is the best method for calculating income and expenses within a JavaScript expense tracker?

I'm facing an issue where I can't add the value of a checked radio button to an object in a different function. Even though there are no errors, nothing gets added. My project involves creating an expense tracker, and adding either income or exp ...

htmljavascript-objects

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

Can a video or image be displayed in HTML using an absolute path from a disk named E: while the localhost files are located in C:?

I'm attempting to construct a basic webpage utilizing HTML and PHP to display various videos, each video within its own videoplayer. The issue arises when I try to find the videos (they are stored in a folder on my secondary hard drive labeled E:&bso ...

htmlpathfilesystemsvideo-streaming

Developing maintenance logic in Angular to control subsequent API requests

In our Angular 9 application, we have various components, some of which have parent-child relationships while others are independent. We begin by making an initial API call that returns a true or false flag value. Depending on this value, we decide whether ...

javascriptangulartypescript

Is it possible to simultaneously verify if an array is empty within an Object along with checking the other fields?

Let's say I have an object that has the following structure: filter: { masterName: '', service:[], } What is the best way to determine if both the array and masterName field are empty? ...

javascriptarraysobjectiteration

Create an interactive musical experience on a webpage using HTML

I'm a newcomer to web technology and I'm trying to dynamically play a music file using Python Django HTML. I have saved the file location in the database and am fetching it. <audio control><source src= {{track.songlocation}} type="audio ...

htmldjangopython-2.7

Utilizing the Context Object in a Slack API Bolt Project for seamless property transfer between methods

I'm currently working on a Slack app using the JavaScript Bolt framework. This app essentially listens for specific message keywords in channels and then forwards those messages to the users of the app. My main goal is to add a permalink to the forwa ...

javascriptnode.jsslack-apibolt

What is the best way to position a table caption at the top of a table?

I need help setting up a calendar within a table structure, and I'm struggling to add a caption at the top of the table. Unfortunately, I can't modify the current table structure. I want it to resemble the example shown below: https://i.sstatic. ...

htmlcsshtml-tablecalendarcss-tables

Exploring AngularJS: A closer look at ngOptions expressions

I have been struggling to populate a Select element with a list of objects for ngOptions. Despite confirming that the data structure is correct and accessible, I cannot get the Select to show the options. Even when rendering the options expression on the p ...

javascriptangularjs

Guide on transferring value from a <select> element using JavaScript

I'm attempting to pass the selected value of a <select> in the onChange function. I've explored this question on SO, but unfortunately, using this and this.value hasn't been successful. I understand that the question is quite old... se ...

javascriptreactjs

Having trouble with HTML - JavaScript function not processing responseText?

On my website, there is a button array that displays the position of a robot by reading a text file using a php/ajax combo. The script initially sets all buttons to the same color and changes the color of the button to represent the robot's position. ...

javascripthtmlcss

Using Bootstrap columns within a PHP while loop

Encountering an issue https://i.sstatic.net/twePb.png and the code in question is shown below: <div class="col-md-4 text-center animate-box"> <a href="work-single.html" class="work" style="background-image: url(images/port ...

phpcsstwitter-bootstrapbootstrap-4

Invalid component prop provided to ButtonBase in Material UI. Ensure that the children prop is correctly rendered in this custom component

Forgive me for asking a basic question, as I am not the most proficient frontend developer and have searched extensively online. Whenever I inspect my frontend application in Chrome, I keep encountering this error. (3) Material-UI: The component prop pro ...

javascriptreactjstypescriptmaterial-ui

Error: The function wrapper.find().simulate('keypress', {key: 'Enter', keycode: 13}) is not working as expected

Let's discuss further about this query vue-btn isn't triggering on pressing the enter key I have designed a sign-in page where users can log in by pressing 'Enter' on the keyboard. Now, I aim to perform a unit test that simulates pres ...

javascriptvue.jsjestjs

Ways to retrieve the page name where the script originates from

I have a function that is triggered from three different pages. Each page involves adding an attribute to a specific div. For instance: <div id="posts" page="home"></div> <div id="posts" page="feed"></div> <div id="posts" page= ...

phpjavascriptjqueryajax

React modules imported in ES6 not functioning as anticipated

I'm currently facing a problem when trying to import a react class into a container. The structure of my files is as follows: ├── components │ ├── Header │ │ ├── Header.js │ │ └── index.js │ └── ...

javascriptreactjsmoduleecmascript-6

The switch statement is not functioning properly when the button is pressed

I am trying to trigger an alert inside a switch statement when I click a button, but for some reason, it is not working. Even if I simply have an alert in the previous function, there is no output on my website. What could be causing this issue? Here is ...

javascripthtml

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

javascripthtml

Multiple card displays not working with Javascript Fetch API

I wrote a script that retrieves data from a URL and then organizes it into tables for display to the user. Initially, the script functioned correctly. However, I decided to enhance its flexibility by introducing two parameters - name and HTML div name wher ...

javascripthtmlcssbootstrap-4

CSS: elements that are only visible when positioned above specific elements

Can we create an element that is only visible above specific other elements? For instance, in the following code snippet, I want the .reflection element to be visible only above the .reflective elements (located at the top and bottom) and not visible on t ...

javascripthtmlcss