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

Unable to execute JavaScript function by clicking

I've tried everything, but I can't seem to change the button text when selecting an item in the "Requirements" dropdown. You can view the issue on this site. Located at the bottom of the page is the "Requirements" dropdown. Each item has an oncl ...

javascriptphpjqueryhtml

Only execute the NPM script if there is a staged JavaScript file

How can I ensure that an NPM script runs only when a JS file is staged, specifically after a pre-commit git hook (using Husky)? The scripts in my package.json are as follows: "scripts": { ... "test": "jest", "precommit": "npm test", ... }, ...

javascriptnode.jsgitnpmpre-commit-hook

Tips for adding a text input field within a dropdown menu

Could someone provide guidance on how to place an input text box within a dropdown without using bootstrap? I came across this image showing what I am looking for: https://i.stack.imgur.com/f7Vl9.png I prefer to achieve this using only HTML, CSS, and Jav ...

javascripthtmlcss

Creating a webpage header with Javascript to mimic an existing design

I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...

javascripthtml

SwipeJS is not compatible with a JQuery-Mobile web application

I am currently attempting to integrate SwipeJS (www.swipejs.com) into my JQuery-Mobile website. <script src="bin/js/swipe.js"></script> <style> /* Swipe 2 required styles */ .swipe { overflow: hidden; ...

javascriptjqueryhtmlcssjquery-mobile

Toggle the play/pause function by clicking - Trigger Ajax

I have a campaign that can be either played or paused. Currently, I have implemented the pause feature using AJAX and now I need to add the play feature as well. When I click on the pause button, I want it to be replaced with the play button. This is the ...

javascriptjqueryajax

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

javascripthtml

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

javascriptcssbackground-colordivision

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Issue: An error occurred stating that the file '/Users/nish7/Documents/Code/WebDev/HOS/frontend/node_modules/eslint-import-resolver-typescript/lib' could not be found. This error is present in the program because of the specified root file for c ...

javascripttypescriptvisual-studio-codefrontendnext.js

Modifying pagination numbers with Reactjs: A step-by-step guide

I am currently working on Reactjs (nextjs) and I have successfully integrated the "Nextjs" framework. The pagination is working fine, but the buttons are displaying as "1,2,3,20" instead of "1,2...20" (showing all numbers without using "..."). How can I mo ...

javascriptreactjsnext.js

Choose CSS Option

I need assistance with customizing my dropdown select option - see the example below <select> <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option> <option value="saab">Saab</option> <option val ...

htmlcsstooltiphtml-select

Differences between visibility property manipulation in HTML and JS

One issue I am facing is that when I add a hidden property to a button in the HTML, it remains invisible. <button id="proceed_to_next_question" hidden> Next Question </button> However, if I remove the hidden property and include the following ...

javascripthtmlvisibility

The value of the ng-model checkbox does not update or change when the checkbox is clicked

There is a checkbox being used in the code snippet below: <input type="checkbox" ng-click="toggleShowOtherUserConfiguration()" ng-model="showOtherUserConfiguration" name="ShowOtherUserConfiguration" value="showOtherUserConfigurati ...

javascript.netangularjscheckbox

Having trouble reaching a public method within an object passed to the @Input field of an Angular component

My configurator object declaration is as follows. export class Config { constructor(public index: number, public junk: string[] = []) { } public count() : number { return this.junk.length; } } After declaring it, I pass it into the input decorated fi ...

javascriptangulartypescriptdecorator

How can CSS be used to center multi-line text with the shortest line appearing at the top

I'm currently working on some html and css code that looks like this: <div style="width: 40em; text-align: center;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard du ...

htmlcsstextalignment

Interactive Div Updates Dropdown Selections Automatically

// function to add set of elements var ed = 1; function new_server() { ed++; var newDiv = $('#server div:first').clone(); newDiv.attr('id', ed); var delLink = '<a class="btn btn-danger" style="text-align:right;m ...

javascriptjqueryhtml

Any suggestions on how to avoid code repetition using Jquery?

This code allows me to create a menu for my gallery. By setting the .masonry # elements to display:none, I can use the corresponding ID in the menu to show the correct gallery when clicked. However, there is a lot of repetitive code in this implementatio ...

jqueryhtmlrepeat

Setting up Node.js for production on Nginx: A comprehensive guide

I am working on developing a chat system using angularjs and nodejs. To enable message sending and receiving, I have implemented socket.io. Initially, I set up a node.js server using localhost cmd. Everything is functioning properly, but now I need to dep ...

javascriptangularjsnode.jssockets

Using Angular Ionic for a click event that is triggered by a specific class

I am utilizing Highcharts and would like to click on the legend upon loading. With the use of Angular Ionic, how can I trigger a click on the .highcharts-legend-item class within the ngOnInit() {} method? I am aiming to click on this class as soon as the ...

javascriptangulartypescriptionic-framework