Changing the backdrop hue behind the dropdown menu items to give a fresh look

Objective

I aim to change the background color and restrict scrolling when a dropdown is opened. It should have a distinct color from the header, disabling scrolling until the dropdown is closed.

Challenges Faced and Solution Attempted

To prevent scrolling, I used $('body').toggleClass('hidden');. However, setting a different background color has been difficult. As a workaround, I added an empty div with the class backdrop and styled it with a semi-transparent background color.

Code snippet provided below:

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
    $('body').toggleClass('hidden');
  });
});
: .hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}...

<!-- Remaining code not included for brevity -->
javascriptjqueryhtmlcss

Answer №1

To enhance your layout, insert an additional div (.overlay) within the .container and utilize CSS with JavaScript. Here is an example of how to implement this:

$(document).ready(function() {
  $('.toggle, .overlay').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
    $('body').toggleClass('hidden');
    $('.overlay').toggleClass('active'); // <-- include this
    //$('.wrapper').toggleClass('active'); // <-- also include this
  });
});
.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
  z-index: 30;
}

.text {
  padding: 10px;
}

.wrapper {
  background-color: pink;
  position: relative;
  display: flex;
  align-items: center;

}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle.active {
  background-color: red;
}

.toggle.active .backdrop {
  display: block !important;
  background-color: blue;
  opacity: 0.5;
  position: absolute;
  width: 100%;
  height: 100%;
}

.toggle-content {
  display: none;
}

.toggle-content.active {
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  z-index: 200;
}
.wrapper.active{
  background: black;
  z-index: 5;
}
.overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  background: black;
  display: none;
  opacity: .5;
  top: 0;
}
.overlay.active{
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
<div class="overlay"></div>
  <div class="wrapper">
    <div class="toggle">T</div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
    <div class="backdrop"></div>
  </div>

  <div class="text">
    <!-- Add your custom content here -->
  </div>;

</div>;

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

Issues with AJAX/jQuery integration in Django

I need to send a specific value to the server. To achieve this, I am using the following code: $.post("http://127.0.0.1:8000/search/",{'long':"30"}); In my views.py, the relevant code is as follows: def search(request): lon = request.PO ...

jqueryajaxdjango

What is the method for providing a date format choice in JSON?

I am encountering an issue in my PHP script where I use JSON to pass parameters. When I pass the date as "09-09-2015", it functions correctly. However, when I try to pass the date as $date, it does not work. How can I resolve this problem? $item1 = "test ...

javascriptphpjson

Creating a dynamic table in HTML with Angular by programmatically inserting rows using components

There's a peculiar issue that I'm facing and I just can't seem to figure out why it's happening. My goal is to display an HTML table using Angular 4. When I use the following syntax to output the table, everything works perfectly: < ...

htmlangular

What is the process for creating a symbolic link from a project's node_modules directory?

Recently, I've been learning how to build a Password Manager using React, Node.js, and MYSQL by following a tutorial. However, I encountered an issue where the file /EncryptionHandler was located outside of the src/ directory of my project. Even thoug ...

javascriptmysqlreactjs

Running a Node JS application concurrently with an Express API connected to MongoDB

Here's my current project plan: I've created a small Node app that fetches data about the stock market from an API and then stores the data in a Mongo DB (which is already up and running). My next step is to create an API that will allow other se ...

javascriptnode.jsmongodbexpressservice

Which is better for posting data via ajax: using JSON.stringify() or default URL encoding?

Is there a specific advantage to using JSON.stringify() when posting a complex object compared to allowing default url encoding with jQuery.ajax? The MVC WebApi I am utilizing is able to handle both types of requests without any issues, so the need to send ...

jqueryjsonajaxasp.net-web-api

Identifying the category of a value through a conditional check on another value

I am looking for my code editor to automatically determine the type of extraData based on the value of error, which is being narrowed down by an if statement: export enum ErrorCodes { Unknown = 'UNKWN', BadRequest = 'BDREQ', } int ...

javascripttypescripttypeserror-handlingstrong-typing

The usage of $http.post in combination with TypeScript accessors

Currently, I am developing an AngularJS application (v1.3.15) using TypeScript 1.5 in Visual Studio 2013. I have encountered a challenge related to TypeScript object properties and JSON serialization while utilizing $http.post(). Although I consider myself ...

javascriptangularjstypescript

Using Bootstrap-select dropdown in PHP with GET method allows for easy inclusion of dropdown options in your web

Currently, I am working on developing a product page that includes a dropdown menu for selecting items and a button to add them to the cart. The products are being retrieved from a MySQL database and then looped through to generate product tables. The drop ...

javascriptphpjquerybootstrap-4bootstrap-select

What is the best way to integrate Greensock CustomEase with TypeScript?

Currently, I am developing a game using Typescript with PixiJS and GreenSock (or is it GSAP?) for handling all the tweening. I recently encountered a situation where I needed to implement some custom easing using cubic-bezier curves. GreenSock provides a C ...

javascripttypescripttweengsap

What could be causing the issue with uglify not functioning properly with AngularJS content?

I've created some gulp tasks to assist in building my web project. One of the tasks involves minifying js files. Here is the task code snippet: gulp.task('minify' , function() { console.log('Copy minified js '); return gulp ...

javascriptangularjsgulpgulp-uglify

Tips for choosing the initial link within a parent list entry

I am working with a jQuery accordion and have a specific need to remove the href attribute from the parent li element without affecting its children. This task requires precision in targeting only the parent li. var parent = $("#quicklaunch ul > li:has ...

javascriptjqueryhtmlcss

Finding a specific element within a table using xpath in selenium proved to be a challenge

I am trying to click on a specific button inside a table where each row has an update button. Here is what my table looks like: <table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table tabl ...

c#htmlseleniumselenium-webdriverxpath

Calculate the number of checked checkboxes using JQuery

Can someone help me figure out how to get the count of checked checkboxes from the code sample below? Thanks, Digambar K. ...

javascriptjquerycheckbox

How can I incorporate a custom color into a preset navbar on an HTML webpage?

<div class="navbar-header"> <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" style="color: blue;" class="navbar-toggle collapsed" type="button"> <i class="fa fa-reo ...

javascripthtmlcss

Looking for assistance in adding some animated flair to your website as users scroll

I don't have much experience in animation but I would like to create some animation effects on scroll down. Can anyone provide suggestions? I attempted using SVG paths, but it didn't work out as expected. What I am aiming for is that when a visi ...

javascripthtmljqueryanimationsvg-animate

Using CSS transform to enhance Flash content

I am currently working on a web application that is contained within an iframe. The iframe has been scaled using -webkit-transform:scale(0.8), which is functioning well. However, I am encountering an issue with the flash audio recorder within the iframe no ...

cssflashtransformscale

Proper method for retrieving and displaying information from a targeted JSON through an API

Utilizing a third-party API requires specifying the desired fields in the request. For instance: axios.get("APIURL", { params: { fields: ["username", "phone", ...etc] } }) The response is typically structured like this: { "data": [{ ...

javascriptjsonrestapivue.js

Working with AngularJS: Accessing a JSON file from the local directory

The answers to my previous questions on this topic have not been satisfactory. It seems that most examples and tutorials for AngularJS online always define tiny JSON arrays directly inside the JavaScript code... So, let's simplify things with a basi ...

javascriptangularjsjson

Locate the final descendant element within the JSON document

My JSON file is structured as follows: "FAMILY": { "1": { "ANNA": { "name": "ANNA X", "alive": true, "children": { "MAX": { "name": "MAX X", ...

jqueryjson