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

How can I add multiple filters to a Kendo Grid?

Is there a way to include two separate filter fields for date filtering in Kendo Grid UI? Currently, the method I am using only allows for one date filter to be displayed. filterable: { ui: function (element: any) { element.ken ...

javascriptangulartypescriptkendo-uikendo-grid

Avoid floating right elements all the way up if there are already elements floating left

I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup. You can see my codepen for a better understanding of what I'm try ...

csscss-float

trouble encountered when attempting to integrate typeahead functionality in AngularJS using jQuery

Greetings! I am brand new to using AngularJS and currently exploring the implementation of typeahead functionality. I decided to utilize an existing library by including the following script: <script src="lib/xyz/typeahead.bundle.js"></script> ...

javascriptjqueryangularjs

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

htmlcssscrollbar

Struggling with uploading files in AngularJS?

Below is the code snippet from my controller file where I aim to retrieve the values of various input elements (name, price, date, image) and store them in an array of objects... $scope.addBook = function(name, price, date, image) { name = $scope ...

javascripthtmlangularjsangular-file-upload

The underscore convention for defining members in Typescript allows for clear and concise

Let's talk about a class called Email class Email { private _from: string; private _to: Array<string>; private _subject: string; } When an email object is created, it will look something like this: { _from:'', _to:'&apo ...

javascripttypescriptecmascript-6typescript2.0es6-class

Having issues with RTL on MuiTextField when using special characters

Currently, I am working on a project where Mui is being used. I have successfully applied RTL according to the Mui guide. However, I am encountering a frustrating problem where special characters in MuiTextField are aligning to the left instead of the righ ...

cssreactjsmaterial-ui

Modify the color of every element by applying a CSS class

I attempted to change the color of all elements in a certain class, but encountered an error: Unable to convert undefined or null to object This is the code I used: <div class="kolorek" onclick="changeColor('34495e');" style="background-c ...

javascripthtmlcss

What is the speed difference between calling functions from require's cache in Node.js and functions in the global scope?

Let's imagine a scenario where we have two files: external.js and main.js. // external.js //create a print function that is accessible globally module.exports.print = function(text) { console.log(text) } Now let's take a look at main.js: ...

javascriptnode.jsperformancecachingrequire

Parsing nested JSON files to present data on a webpage

I have a JSON file containing Reddit post titles and their respective scores: { "'JavaFX Simple Inventory Management App - Open source'": 39, "'Creating Formula Dependency Maps from Excel Spreadsheets'": 5, "'CVE-2017-5645 ...

javascriptjqueryjson

How can I extract just the initial 2 letters of a country name using AmCharts maps?

Having trouble with Amcharts maps. I have a map that displays countries as United States, but I only want them to show as US. Is there a country formatter available for this issue? Any help is appreciated. ...

javascripttypescriptmapsangular5amcharts

The functionality of Ajax loading content will fail when the link is already loaded

I am currently using an ajax script that dynamically replaces the content of #main with the contents of a loaded page based on the clicked link. For example, clicking on rddd would replace #main with the content of about.php. However, I encountered an is ...

javascriptjqueryhtmlajax

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

I'm utilizing a getServerSideProps function on the directory page. pages/catalog/index.js export async function getServerSideProps(ctx) { const response = await fetch( `http://someDomen.com/api/ipro/catalog?${ctx?.query?.page ? `page=${ctx.quer ...

javascriptreactjsnext.js

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

javascriptjquerycssajax

Obtaining a URL from a parameter

I have a unique situation with one of my parameters in the routing, as it involves an actual URL. router.get('/api/sitemap/:url', function(req, res) { var url = req.params.url; ... } How can I ensure t ...

javascriptnode.js

Share a Node.js Express.js npm package for universal access within the project

Here is my current folder structure. /app.js /src /routes /controllers Within the routes folder, there are multiple javascript files that all require the passport.js package like so: const passport = require('passport'); Is it possible to c ...

javascriptnode.jsexpress

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

htmlcsstwitter-bootstrap

"TailwindCSS opts for the inclusion of prefexied utilities instead of relying

Trying to set the height of the div to h-2, with a class that includes height animation on medium devices. The issue is that even though h-2 should be used on mobile, tailwindcss still uses h-20 instead. Any thoughts on why this may be happening? Here i ...

cssreactjsnext.jstailwind-css

Contrasting the Javascript onload event with plain script within an html page

Can you identify the distinction between these two code snippets: Sample 1: <script type="text/javascript> function myfunc () { alert('hi'); } window.onload = myfunc; </script> Sample 2: & ...

javascriptdom-eventsonload

2 mistakes: (Uncaught ReferenceError: require isn't defined) & (npm ERR! script missing: start)

Issue #1: Environment Variables I am facing a problem with my JavaScript files app.js (main) and request.js. Both files are at the same level in the root directory, just like index.html. The request.js file contains process.env.APP_KEY. I attempted to i ...

javascriptnode.jsnpmenvironment-variables