Animating the mobile menu transition using Bootstrap CSS

Can anyone help me with animating the mobile menu when I click the menu icon?

This is what I have for the menu:

.overlay-menu {
    position: fixed;
    display: none;
    z-index : 1040;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0,0, 0.5);
    top : 0;
    left : 0;
}

.mobile-menu {
    position: fixed;
    display: none;
    z-index: 1050 ;
    top: 0;
    left: 0;
    background: white;
    width: 50%;
    height: 100vh;
    text-align: center;
    overflow-x: hidden;
}

I'm displaying the overlay when I open the menu using JavaScript. I also tried adding a transition to the mobile-menu class but it's not working.

-webkit-transition: all 0.2s;
transition: all 0.2s;

The mobile navigation:

<nav class="mobile-menu shadow-sm" id="mobile-menu">
           
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">test</a>
                </li>
                
            </ul>
            
        </nav>

I am using Bootstrap 4 and added this menu below the main menu, along with media queries to hide it on larger devices. Is there anything wrong that I'm doing here? Any help would be appreciated as I am still learning.

javascripthtmlcssbootstrap-4

Answer №1

One way to handle the visibility of an element is by adjusting its opacity property from invisible (opacity: 0) to visible, which also ensures that CSS transitions will take effect.

$('button').on('click', function() {
  $('#mobile-menu').toggleClass('hidden');
})
body {
  font-family: 'Open Sans', sans-serif;
  background: #eee;
}

.overlay-menu {
  position: fixed;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}

.mobile-menu {
  -webkit-transition: all 1s;
  transition: all 1s;
  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;
  background: white;
  width: 50%;
  height: 100vh;
  text-align: center;
  overflow-x: hidden;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

button {
  z-index: 1051;
  position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
  Show menu
</button>
<nav class="mobile-menu shadow-sm hidden" id="mobile-menu">

  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">test</a>
    </li>

  </ul>

</nav>

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

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Autocomplete feature in MUI allows filtering to begin after typing at least 3 characters

I've encountered an issue with the Autocomplete MUI component I'm using to filter a list of checkboxes. The popup with options should remain open at all times, but I only want the filtering to be triggered when the user input is more than 3 chara ...

javascriptreactjstypescriptmaterial-ui

Attempting to utilize the JavascriptExecutor for button testing, however encountering an error message stating 'Unexpected keyword or identifier'

When I look at my code, I see this line: JavascriptExecutor js = (JavascriptExecutor) driver; A red line appears underneath it with the error message Unexpected keyword or identifier I attempted to resolve this by importing org.openqa.selenium.Javascrip ...

javascriptselenium-webdrivertesting

How does SWR affect React state changes and component re-rendering?

I am currently utilizing SWR for data fetching as outlined in the documentation: function App () { const [pageIndex, setPageIndex] = useState(0); // The API URL incorporates the page index, which is a React state. const { data } = useSWR(`/api/data? ...

javascriptreactjsnext.jsswr

Unable to successfully reset the validity status to true

After implementing server-side validation using the OnBlur event in a form, I encountered an issue where setting the validity of a field to false does not remove the error messages even after setting it back to true. I expected $setValidity true to clear e ...

javascriptangularjs

Select values to Component from an array contained within an array of objects

Each user possesses a unique list of tags, and every item owned by the user can be associated with multiple tags from this list. In this scenario, I am attempting to display all the tags belonging to a user for a particular item. If the item has a tag tha ...

javascriptarraysreactjs

Whenever text is present, the sides of my box model, constructed using HTML5 and CSS3, are always pushed downward

When I add extra text to the body of my homepage, it causes a distortion and pushes down the sidebar and advertising boxes on the side. I'm working on this project for class and even though I've asked my teacher for help, she says the code is fin ...

javascripthtmlcss

Execute a task on Mobile Safari (after a delay)

I'm currently experimenting with HTML5 on Mobile Safari for iOS 6 and I'm curious about executing JavaScript code after a certain amount of time has elapsed. One specific task I am interested in is redirecting to a different page after 60 seconds ...

javascripthtmliosmobile-safaridom-events

I'm experiencing an issue where my drum app element does not refresh after performing an action dispatch

Struggling with my React/Redux drum app, I'm at a roadblock with the final component that should update with the selected object's ID through an action dispatch. It baffles me why the element won't reflect the changes even though I've c ...

javascriptreactjsreduxreact-redux

Javascript editing enhancement for real-time changes

Are there any tools for in-place editing of Javascript code? I'm looking for something similar to Firebug, which is great for instant CSS editing and previewing but doesn't have the capability to edit JavaScript directly. Is there a tool or addon ...

javascripthtmlcssfirefox-addonfirebug

What is the best way to conceal text that is not enclosed in <p> or <span> tags?

I need to hide a specific portion of text in an HTML code snippet, however, the text is not wrapped in any specific element. Here is an example: <div class="content"> Give comfortable and durable place to work with a desk. Lock the center d ...

javascripthtmlcss

Encountering a malfunction in executing the AngularJS controller file

In the project run with http-server and node.js, the angular controller is unable to connect with index.html. classifieds.js (function() { "use strict"; angular .module("ngClassifieds") .controller("ClassifiedsCtrl", ['$scope', ...

javascriptjqueryhtmlangularjs

The installation of "npm" was completed successfully, however there seems to be an issue when

I am currently facing an issue while trying to set up http-server, bower, and grunt on my Windows machine. After successfully installing them using npm install, I encountered a 'command not found' error when attempting to run the commands. Even a ...

javascriptnpm

When Controller Scope Goes Missing in ng-repeat

Upon glancing at my code, it should be evident that I am a newcomer to the world of Angular. I am currently developing an application that enables users to search for text, queries a database whenever the value in the text input changes, and displays a li ...

javascriptangularjs

npm: generate new script directive

When I start up my NodeJs (ES6) project, I usually enter the following command in the console: ./node_modules/babel/bin/babel-node.js index.js However, I wanted to streamline this process by adding the command to the scripts section of my package.json fi ...

javascriptnode.jsnpm

Using the https module in Node.js to transfer a file to a PHP server

What is the best method to send an HTTP post request that includes a jpg file to a php server using the node https module? I attempted to use the request module, but it is unreliable (timing out most of the time) and already deprecated. Here is the functi ...

javascriptphpnode.jshttphttps

Jquery Error: Unable to split object

Why am I getting an error saying "Uncaught TypeError: Object # has no method 'split'" when trying to run this page by clicking on the dropdown and triggering a change event that sends an AJAX request? <html xmlns="http://www.w3.org/1999/xhtm ...

javascriptjqueryajax

What is the process for adjusting the color of a mat-divider?

Has anyone been successful in changing the color of mat-divider? I attempted the following but had no luck: component.html <mat-divider class="material-devider"></mat-divider> component.scss .material-devider { color: red } ...

htmlcssangularsassangular-material

A user-friendly JavaScript framework focused on manipulating the DOM using a module approach and aiming to mirror the ease of use found in jQuery

This is simply a training exercise. I have created a script for solving this using the resource (function(window) { function smp(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; i ...

javascripthtmlcssdomframeworks

Is the return value a result of destructuring?

function display(): (number, string) { return {1,'my'} } The code above is displaying an error. I was hoping to use const {num, my} = print(). How can I correctly specify the return type? ...

javascripttypescript