Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close.

This is what I have so far:

 $(document).ready(function() {

    $('#menu-toggle').click(function(e) {
      e.preventDefault();
      $('#wrapper').toggleClass('toggled');
      $('#overlay').toggle();
    });

    $('#overlay').click(function() {
      $('#overlay').hide('200');
      $('#wrapper').removeClass('toggled');
    });
  });


#overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-color: rgba(0,0,0,.5);
}

You can view the demo here.

Although my code is functioning properly, I am having difficulty achieving the desired animation effect. I would appreciate any help in improving the visual transition.

Specifically, I am aiming for an animation similar to android lollipop or material design effects.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Check out the code snippet below for a solution:

You can implement jQuery's fadeIn and fadeToggle functions to achieve this effect.

 $(document).ready(function() {

    $('#menu-toggle').click(function(e) {
      e.preventDefault();
      $('#wrapper').toggleClass('toggled');
      $('#overlay').fadeToggle( "slow", "swing" );
    });

    $('#overlay').click(function() {
      $('#overlay').fadeOut('slow');
      $('#wrapper').removeClass('toggled');
    });

  });

CSS Snippet:

 /*! 
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 */ 

/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

/* additional CSS styling here */

body {padding-top: 51px;}

#overlay {
position: fixed;
z-index: 999;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
background-color: rgba(0,0,0,.5);
}

For more detailed information and live demonstration of the code in action, refer to the complete code provided above.

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

Experience the power of VueJS 3 with Pinia, all without the need

I've hit a wall. Despite scouring documentation and countless google searches, I can't seem to find the answer to this straightforward query: how do I install/import PINIA in a VUE application? Let's consider a basic VUE app: <div id=&qu ...

javascriptvue.jspinia

Utilizing the array result obtained from the fetch function

Seeking assistance with a coding issue. I am puzzled as to why I am unable to utilize the data returned from an API call outside of its function, even though there are no errors occurring. The fetchUser function successfully retrieves the data from the API ...

javascriptnext.js

Extracting multiple values using the .find method in JQUERY / JavaScript

I'm facing an issue with my JSP page form. When I submit the form, it generates a JSON string which is sent via AJAX post. The problem arises when I try to extract multiple values from the form using the following method: .find('input[name=ite ...

javascriptjqueryajaxjquery-ui

Uncertain about troubleshooting the `uid: prismicDocument.uid ?? void 0` error on a Prismic and Next.js website?

Currently, I am working on a Next.js project integrated with the Prismic CMS. The website runs smoothly in my local environment, however, after some recent updates to the content, I encountered the following error during production builds: 2:42:19 PM: /opt ...

javascriptnext.jsprismic.io

IE6/7 dilemma with CSS floating

Encountering a strange CSS float issue in IE6 and IE7. The HTML code looks like this: <fieldset style="float:left"> <legend>Summary</legend> <div class="display-label">Recruitment type</div> <div class="displa ...

cssinternet-explorer-7css-floatinternet-explorer-6

Shift a Div to the left prior to stretching it out

I am trying to achieve a smooth leftward movement and expansion animation for a div. Currently, I am experimenting with class switching on click events to transition between the desired states. However, I am facing difficulty in making the element first mo ...

javascriptjqueryhtmlcss

Adding a background image in javascript using data from a MySQL database

My current tech stack includes CodeIgniter, vanilla JavaScript, AJAX, CSS, and MySQL. I am trying to figure out how to set the background of an image that is stored in a MySQL database. While the following code is error-free and working perfectly, my cha ...

javascriptphpcssajaxcodeigniter

Delete the parent div when the button is clicked

trying to create a dynamic button system to add/remove inputs on clicks. I have the addButton working but not the deleteButton. What am I missing? $(document).ready(function() { var maxFields = 20; var addButton = $('#plusOne'); va ...

javascriptjqueryhtml

How can I effectively make properties accessible in my template to facilitate form validation in Angular?

Scenario: I'm facing a situation in my Angular project where I have a LoginFormComponent. This component has a form with two properties: email and password. My goal is to create properties within this component that can be accessed in the template. Th ...

htmlangularformsangular-forms

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

I recently successfully converted a dynamic webpage to PDF using jsPDF and now I'm looking to customize the font family of the PDF document. Is there an option for this in jsPDF? Please advise, thank you! Here is my code snippet: <div id="#p ...

javascripthtmljquerycss

Assigning a function to a variable

I am attempting to assign a function to a variable (req): var req; $('#complete-field').bind('keyup', () => { var url = prefixUrl + escape($('#complete-field').val()); req = function() { if (window.XMLHttpRequest) { ...

jquery

What are the steps for generating a diagram using Chart.js?

I'm attempting to use Chart.js to create a specific diagram. Current Challenges: The point on the x-axis should be centered within the categories. I would like the value to appear above the point. https://i.sstatic.net/FFFr1.png This is what my co ...

javascriptchart.js

The text does not automatically move to the next line

How can I make the content in this form section wrap to the next line in a list-item and overlap the width of the div content? The second line, particularly where it mentions Security Question two https://i.sstatic.net/5CVi2.png This is my HTML & CS ...

htmlcss

Will a notification box appear upon submission indicating success or failure?

After the submit button is clicked, I need a pop-up box to display either a successful or failed message. Then confirm the message by clicking OK. Currently, I am seeing an "undefined" pop-up followed by a failed message pop-up. Can someone please assist m ...

phpjavascript

Tips for choosing or unselecting a row within a Table utilizing the Data Grid Mui

Is it possible to implement row selection and deselection in Mui without using the checkboxSelection prop? I am looking for a way to achieve this functionality in @mui/x-data-grid when clicking on a row. Below is the code snippet from the Table Component ...

javascriptreactjsmaterial-uidatagrid

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Can you arrange a JavaScript array based on the innerText values of its HTML elements? I am generating a div element (class="inbox" id="inbox${var}") with a number as its innerText, then adding all these divs to an array (numArr). I wan ...

javascripthtmlarraysdomscope

I am struggling to find the correct way to fetch images dynamically from Cloudinary and display them as backgrounds. How should I go about implementing this feature successfully

I have been trying to figure out why I am unable to retrieve the image from cloudinary. My goal is to use the image as a background when posting, but it seems like I am not fetching the image correctly. function Post({post}){ return( <div ...

javascriptreactjsbackgroundcloudinary

Adding a gap between the Bootstrap navbar and jumbotron for better spacing

Upon examining the Bootstrap example provided at: http://getbootstrap.com/examples/navbar/ I noticed there is a gap between the jumbotron and the navbar. After delving into the example's CSS, I found that disabling this rule (twice): .navbar { ...

csstwitter-bootstrap

Issue with jQuery fadeIn() and fadeOut() functions on IE versions 7 and 8

I have a project in Ruby on Rails that showcases illustrations. The top of the page features category links that fade out the current illustrations, replace them with new content, and then fade back in. Currently, I am utilizing jQuery version 1.6.2 for t ...

javascriptjqueryruby-on-railsajaxinternet-explorer

Blip Scripts: Converting JSON to JavaScript - Dealing with Undefined Arrays

I am currently working on a project to develop a bot on Blip. There are certain parts where I need to send a request to an API and then use a JavaScript script to extract elements from the JSON response. The JSON response I received from the API is stored ...

javascriptjson