Ways to modify the background color of the entire body excluding a sidebar div

How do I implement an overlay and dim the screen after clicking on a menu button?

<ul id="gn-menu" class="gn-menu-main">
                <li class="gn-trigger">
                    <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
                    <nav class="gn-menu-wrapper">
                        <div class="gn-scroller">
                            <ul class="gn-menu">
                                <li class="gn-search-item">
                                    <input placeholder="Search" type="search" class="gn-search">
                                    <a class="gn-icon gn-icon-search"><span>Search</span></a>
                                </li>
                                <li>
                                    <a class="gn-icon gn-icon-download">Downloads</a>
                                    <ul class="gn-submenu">
                                        <li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
                                        <li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
                                    </ul>
                                </li>
                                <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                                <li><a class="gn-icon gn-icon-help">Help</a></li>
                                <li>
                                    <a class="gn-icon gn-icon-archive">Archives</a>
                                    <ul class="gn-submenu">
                                        <li><a class="gn-icon gn-icon-article">Articles</a></li>
                                        <li><a class="gn-icon gn-icon-pictures">Images</a></li>
                                        <li><a class="gn-icon gn-icon-videos">Videos</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div><!-- /gn-scroller -->
                    </nav>
                </li>
                <li><a href="http://tympanus.net/codrops">Codrops</a></li>
                <li><a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/HeaderEffects/"><span>Previous Demo</span></a></li>
                <li><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16030"><span>Back to the Codrops Article</span></a></li>
            </ul>

When the user clicks here (a button)

The sidebar opens on the right, with the entire screen dimmed using background-color: rgba(0, 0, 0, .9); except for the right sidebar.

Any advice or assistance would be greatly appreciated. User interface design work is quite intricate in my case, as I am primarily a Java developer creating my personal website. I have recently started learning CSS & jQuery as well.

jqueryhtmlcss

Answer №1

To create a hidden effect, apply the CSS property 

box-shadow: inset -9999px 0 0 0 rgba(0, 0, 0, 0.25);
to the header element.

Alternatively, you can modify the background-color of the header element to achieve a similar result.

For a different approach, utilize a large div that overlays the page. Ensure the menu has a higher z-index value than this oversized div.

The following styles should be assigned to the massive div:

z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

Apply these styles to the Nexus Menu:

z-index: 1000;
position: /* Any positioning except static */

Answer №2

Attempt to load by making use of jQuery.

$(document).ready(function() {
  // create a toggle flag
  var isClicked = false;
  
  // store original CSS properties of header
  var headerCSS = $("header").css(["background", "opacity", "width"]);
  
  // event handler for icon click
  $("a.gn-icon").on("click", function() {
    if (!isClicked) {
      // update header CSS to dim the screen
      $("header").css({
        "background": "rgba(0, 0, 0, .9)",
        "opacity": "0.25",
        "width": window.innerWidth - 355,
        "float": "right"
      });
      
      // set isClicked flag to true
      isClicked = true;
    } else {
      // reset header CSS to initial values
      $("header").css(headerCSS);
      
      // set isClicked flag to false
      isClicked = false;
    }
  });
});

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

Having trouble activating the submit function using an external JavaScript file

Having trouble getting the form to submit properly. I have placed the form inside a <div id="access"></div> by setting its innerHTML using an included js file in the header of the page. Here's how it looks: <div id="access"> < ...

javascriptjqueryajaxformsjquery-events

The silent button malfunctioning - Ionic

Within the html file: <video preload="metadata" muted="true" controls playsinline webkit-playsinline loop> Despite the "muted" tag, the video is playing with sound in both the browser and on the device. After referencing the video and setting the ...

htmlangularjsionic-frameworkionic2ionic3

Encountering issues with accessing the clientWidth and clientHeight references of the DOM in Vue

Issue with 'clientWidth' and 'clientHeight' properties on Vue and Element types. <div class="invoice-step-detail" id="invoice" ref="invoice"> @Component({ name: 'CreateInvoice', co ...

htmltypescriptvue.jsvuejs2vue-class-components

Troubleshooting regex validation issues in a JSFiddle form

Link to JSFiddle I encountered an issue with JSFiddle and I am having trouble figuring out the root cause. My aim is to validate an input using a regex pattern for a person's name. $("document").ready(function() { function validateForm() { var ...

javascriptjqueryhtmlcssjsfiddle

Arranging pictures in both vertical and horizontal alignment (CSS)

I've been attempting various methods to solve this issue, but none have proven successful. My goal is quite simple: align images both horizontally and vertically in a manner that fills empty spaces with photos. Similar to the layout here: The challe ...

htmlcss

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

cssimageborder

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

I've hit a roadblock while trying to create a react app on my 2011 MacBook Pro. To start, I downloaded the latest version of Node from their official website. Following the instructions from React documentation, I ran the following commands: npm uni ...

javascripthtmlnode.jsreactjsfsevents

Ensuring the same height for the navigation bar and logo with aligned vertical text

I'm in the process of recreating a simple navigation menu and I've reached the section where I am encountering an issue with the list items. The orange li element is not filling up 100% of the width, and I also need the links to align in the midd ...

htmlcss

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Issue: I am facing an issue where I cannot record video or get a video stream from the camera on iOS through my Angular web application built using ng build. Investigation: In my investigation, I explored various websites that discuss Apple iOS features ...

htmliosiphonetypescriptmediarecorder

data-set contains an undefined value

I am encountering an issue while trying to retrieve the value of a data-set using JQuery. It seems to return undefined and I am unsure about the reason behind this problem: <option class="option" value="<?php echo $art["id_art"]; ?>" ...

jqueryajax

It's impossible to remove a dynamically added class from a button

I'm facing an issue with adding and removing classes from a button using jQuery. I added a new class to the button, then removed it, but now when I click the button again I want to revert back to the initial class. Unfortunately, my code is not workin ...

javascriptjquery

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

javascripthtmlangularjscanvaskineticjs

Struggling to use GSAP to control the timeline with my custom functions

I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. Howeve ...

jqueryhtmlcssgsap

How can I use AJAX to read an image file and display it on a Canvas?

Is there a way to read an image from my server using Ajax and then display it on Canvas? I am aware that this can be achieved by using normal image tags and canvas draw methods, as shown below: <img id="myImage" src="./ColorTable.PNG" style="display:n ...

javascriptjqueryajaxhtmlcanvas

Trouble with the display:none attribute in Firefox and Chrome

<tr style="height:5px" id="TRRSHeaderTrialBar" name="TRRSHeaderTrialBar" style='display:none'> <tr id="TREmail" name="TREmail" style="height:1px;" nowrap style='display:none'> Using the code snippet above to hide the bar w ...

javascripthtmlcss

Error message: ngRepeat does not allow duplicate elements in an array

Upon review, I discovered this particular piece of code: <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <script> var app = angular.module("myS ...

javascripthtmlangularjsarraysangularjs-ng-repeat

Refresh the Dom following an Ajax request (issue with .on input not functioning)

I have multiple text inputs that are generated dynamically via a MySQL query. On the bottom of my page, I have some Javascript code that needed to be triggered using window.load instead of document.ready because the latter was not functioning properly. & ...

javascriptphpjqueryhtmlajax

The conclusion of Ajax's response signals the beginning of Jqmobi

I am currently utilizing the jqMobi framework for a web application. Within my application, I establish a connection to the server, send the username and password, and in return, receive a string similar to this: [{"utoken":"e43aa84cc304a1ed3722832616294 ...

jqueryajaxjsonmobilejqmobi

Why won't the value in jQuery attr() be updated?

Just joined this platform for the first time and can't seem to find a similar issue posted before.. :( I'm currently trying to catch up with jQuery and JavaScript. My problem is that I want to dynamically change the href attribute of an anchor e ...

jquery

Issue with parentNode.replaceChild not functioning properly in Internet Explorer 6

In my HTML file created with FCK editor, I attempted to replace an existing table element with a new one using the parentNode.replaceChild method. While this change was successful in Internet Explorer 8, it resulted in errors when viewed in IE6 and IE7. ...

javascripthtmlinternet-explorer-6fckeditor