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

Ways to remove HTML tags from outputted data

I'm encountering a syntax issue. Any tips on removing html tags in jQuery? $.ajax({ type: "POST", url: '/populate', data: {id: id, '_token':$('input[name=_token]').val()}, success: functio ...

jqueryajax

Interactive Range Slider for Scrolling Through Div Content

I am currently facing an issue where I want to implement a HTML range slider for controlling the horizontal scrolling of a div located below. This functionality is similar to that of a scroll bar, but it will be positioned away from the scrollable content ...

javascriptjquery

I am facing an issue where the weather information is not being displayed even after sending a request to

I'm working on building an app that will provide users with weather data once they input a city. Utilizing the openweathermap.org API for this purpose, I've noticed in my console under networks that an API call is made when the city is entered, b ...

htmlcssreactjs

Connecting MySQL to HTML: Step-by-step guide

I am currently working on building a website through coding in HTML using gedit. My goal is to have a login or registration feature on the homepage, which will then direct users to their own personalized page on the site. On this page, they should be abl ...

javascriptmysqlhtmlsqlgedit

Analyze and tally occurrences in two arrays

I have two arrays $array1=('18753933','18753933','18771982') $array2=('18753933','18771982') My goal is to compare the values that are the same in both arrays. var countArticlesLoaded=0; for(var $i=0;$i ...

javascriptjquery

Creating your own personalized menu in PHP

Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...

phphtmlmenuhyperlink

What is the best way to show a left and right arrow on a mobile website page?

I'm experiencing a strange issue with my webpage, specifically a post in Wordpress. When I try to insert the left right arrow character (U+2194) either by copying from a character map or using the html code, I end up with an icon instead of the actual ...

htmlmobile-safarimobile-chrome

What causes the off-canvas menu to displace my fixed div when it is opened?

Using the Pushy off-canvas menu from GitHub for my website has been great, but it's causing some trouble with my fixed header. When I scroll down the page, the header sticks perfectly to the top, but once I open the off-canvas menu, the header disappe ...

javascriptjquerycssoff-canvas-menu

How to Eliminate Lower Borders from DataGrid Component in Material UI (mui)

I've been trying to customize the spacing between rows in a MUI Data Grid Component by overriding the default bottom border, but haven't had much success. I've experimented with different approaches such as using a theme override, adding a c ...

cssreactjstypescriptmaterial-ui

Utilizing Unicode characters within the content of a pseudo element in data-content

Is there a way to include unicode in the data-content attribute using JQuery for pseudo element content? I'm having trouble with the correct formatting. How can I properly display unicode characters? Currently, all I see is &#x25BC;. a::after { ...

jquerycssunicodepseudo-element

What are some techniques to create a dynamic background for a div that

I've been attempting to create responsive background images within a div element, but unfortunately, my current method is not producing the desired results. Below is an excerpt of my CSS code: .block-main{ background: url(images/ohdaihiep/bg1. ...

cssbootstrap-4responsive-designbackgroundresponsive-images

CSS: Handling Background Images Responsively

I'm experiencing an unusual issue where the image is not appearing, even though the div box shows up when I highlight elements on the page. Validation and inspection also show no issues. Here is the code: <div class="mainImage"></div> A ...

htmlcss

Instructions for using jQuery to replace the final <a> tag within a specific section

Here is a section that I am working with: <section class="breadCrumb"> <a href="/">Home</a> <span class="divider">&gt;</span> <a class="CMSBreadCrumbsLink" href="/SCCU.Stg/Events-Calendar.aspx">Events Calendar ...

javascriptjqueryhtml

What steps should I take to include a Follow - Unfollow Button on my Website?

I need to add a button on my website that allows users to either follow or unfollow a specific game. Here is the table for the follow buttons: Follow Button Table When a user clicks on the button related to the game ID, it should update the game_follow d ...

javascriptphpjqueryhtmlmysql

How can I loop the keyframe animation across various elements of an SVG file simultaneously?

After creating an animation using CSS and SVG, I am experiencing different parts of it animating in and out. My goal is to have the animation start from the top once it's finished. There are multiple keyframes involved since I'm animating variou ...

javascriptjquerycsssvgcss-animations

Issue with ASP.NET Base64 image source rendering incorrectly

After retrieving a Base64 string from Azure active directory using a Lambda function, which represents a user's profile picture, I am facing issues displaying it on an ASP.NET page. Below is the code snippet in ASP.NET (The referenced HTML object is ...

htmlasp.netimagebase64

Obtaining the textarea value from LineControl Editor in an MVC Controller: A Step-by-Step Guide

I recently integrated a jQuery plugin into my MVC 5 project to create a wysiwyg text editor. In one of the views, I included a textarea where the text editor is meant to be displayed. However, I encountered an issue with binding or retrieving the value o ...

jqueryasp.net-mvc-5

Customizing SVGs for Ion Icons Version 5 in a React Application

I have been using ion icons in React by importing them directly into my index.html. While this method has been working well with the icons from ion icons found here, I know that you can also use custom SVGs by specifying an src attribute in the ion-icon ta ...

htmlreactjssvgionicons

No results found for the xpath within the <p> tag

I'm currently using selenium.webdriver chrome to scrape data from my website, and I need to extract the location details of visitors. Although I have successfully identified the <p> tag that contains 'location', it is returning None. ...

htmlselenium-webdriverxpathpython-3.6

Designing visual representations using the Canvas elementorGenerating graphic content

I want to design a creative text image where multiple characters come together to form a word, like "The Matrix", within an animated canvas with a matrix effect. The challenge I'm facing is figuring out how to display the text inside the canvas and th ...

javascripthtmlcsswebcanvas