The side navigation panel transition is stuck and failing to slide out as intended

My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more information if needed. Thank you. I've also provided a JSfiddle link:
https://jsfiddle.net/fraserdale/8Lm78mbv/

<div id="mySidenav" class="sidenav1 change  " style="width: 250px">
<ul style="list-style-type: none">
<li><a href="#">Thanks </a></li>
...

and the JS

<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('mySidenav');
if (x.style.display === 'none') {
  x.style.display = 'block';
    document.getElementById("mySidenav").style.marginLeft = "0px";
    ...
}
...

and finally the CSS

body {
background-color: #23272B;
margin: 0px;
padding: 0px;
outline: none;
}

.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
overflow: auto;
font-family: verdana;
...
.full CSS content here...
javascripthtmlcss

Answer №1

The menu is not being hidden using the display: none property when it slides off the screen. Therefore, the condition 

if (x.style.display === 'none') {
will not accurately test the state. To address this issue, I have introduced a new class called .closed that will toggle based on whether the menu is open or closed. This class can be used to detect the state more effectively.

body {
    background-color: #23272B;
    margin: 0px;
    padding: 0px;
    outline: none;
}

.credit{
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-size: 15px;
color: #fff;
font-family: Verdana, Geneva, Tahoma, sans-serif
}
.sidenav {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: #16191C;
position: fixed;
top: 0px;
width: 125px;
height: 100%;
color: #e1ffff;
z-index: 200;
margin-left: 250px;
transition: 1s;
}

* {
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out ;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
text-decoration: none;
font-family: open sans, sans-serif;
}
.sidebar-inner {
height: 200px;
position: relative;
top: 50%;
transform: translateY(-50%);
padding-left: 25px;
padding-right: 25px;
    transition: 1s;
  
}
 ..........................
.......(CSS code continues)................

<!DOCTYPE html>
<html >
<head>

... (HTML and other code continuation)

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

Trigger the onclick method by selecting an icon within the MUI DataGrid

Currently, I am utilizing the default MUI Dialog model in the "DialogModel.js" component. Additionally, I have integrated another MUI DataGrid component as shown below: // RulesTable.js import * as React from 'react'; import { DataGrid } from &a ...

javascriptreactjsmaterial-uimui-x-data-grid

"Troubleshooting Why AJAX Update for CGridView is Not Functioning

I've encountered an issue with my CGridView grid where I receive an error every time I try to update it. Despite spending a lot of time trying to resolve this, I still haven't been able to figure out what's missing. Here's the code sni ...

javascriptjqueryajaxyiicgridview

Creating a dynamic method to set data for a stacked bar chart in chart.js

In the following code snippet, you can see how my stacked bar chart is rendered using Angular: <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]=" ...

javascriptangularchart.jschart.js2

Unable to utilize the .keyCode method within a query selector

Trying to utilize .keyCode in JavaScript to identify a pressed key, but the console consistently displays null after each key press. Below is the relevant CSS code: <audio data-key="65" src="sounds\crash.mp3"></audio> ...

javascripthtmlcss

Is incrementing x by 1 equivalent to x + 1?

I have a very basic angular application. It simply increases the value by 1 when clicked on using ng-click. Take a look at JSFiddle <div ng-app="app" ng-controller="ctrl"> <div ng-click="hello=hello+1">THIS WORKS ON CLICK: {{hello}}</d ...

javascriptangularjsangularjs-ng-click

The window fails to load properly after building, but functions perfectly while in development server mode

My application is not displaying a window after it's built, but it works perfectly fine when I execute npm run serve Even though there is a process running in the task manager, the same issue persists if I try using the installer. I'm not receiv ...

javascriptvue.jselectronelectron-builder

Dynamically fetching and uploading files from a specific path using Node.js, Express, and Angular 1.x

How can I upload or move all files from a specific folder using NodeJS, Express, and Angular 1.x by providing the folder path? What is the best way to handle this operation in either Angular or Node? Should I use: var fs = require('fs') module ...

javascriptangularjsnode.jsexpress

How does the "deliver_order" function retrieve the value of the name parameter?

function take_order(name, callback1) { console.log("order has been taken."); callback1(name); } function prosess_order(name, callback2) { console.log(`prosesing order for ${name}.`); callback2(name); } function deliver_order(name) { console.log ...

javascriptfunctionasynchronouscallback

What is the best way to loop through an object while keeping track of its value types

I have a JSON file containing UI adjustments sourced from the API: interface UIAdjustmentsJSON { logoSize: number; themeColor: string; isFullScreen: boolean; } To simplify things, let's utilize a static object: const adjustments: UIAdjust ...

javascripttypescriptdictionary

What causes the button's frame color to change when I click on it?

I am facing an issue with a button I created. When I click the button, the frame color changes and I cannot figure out why. I have attached images showing the button before and after it is clicked. Before: https://i.sstatic.net/5jpB1.png After: https://i ...

css

What are the steps to update content by referencing an id in the hash URL?

Currently, I am utilizing the following code snippet to extract an ID from the hash URL: var integer = window.location.hash.match(/\d+/) | 0; alert(integer); However, I have encountered an issue where upon using the back button after modifying the U ...

javascriptjqueryajaxbrowserurl-rewriting

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

My form contains an input with a dropdown, where I display JSON data like this: { "title": "Parent #1", "child" : [ {"title": "Child ##1"}, {"title": "Child ##2"}, {"title": "Child ##3"}, {"title": "Child ##4"} ...

javascripthtmlangularjs

steps to verify the status of a sent request

I am utilizing the contenteditable property in a p tag. My code is as follows: <p contenteditable="true" id="Option1_<?php echo $i ?>" style="width:98%;border:4px thin black; background-color:#D6D6D6;font-size:18px;color:black;padding:3px ">&l ...

javascriptphpjquerymysqlajax

Tips for incorporating a hashbang into a JavaScript file that is executable without compromising browser compatibility

Is it possible to run code like this in both Node.js and the browser? #! /usr/local/bin/node console.log("Hello world") I have a script that I currently run locally in Node.js, but now I want to also execute it in the browser without having to modify it ...

javascriptnode.jsbashtypescript

Is there a specific HTML tag available to instruct the browser to cache my HTML and/or CSS files for future use?

Up to this point, my research has indicated that enabling JavaScript and CSS browser caching typically requires server side settings such as .htaccess. Is there any HTML tag or configuration within the HTML page or JavaScript that can instruct the browse ...

javascriptcsscachingbrowser-cache

Extract specific data points from external API responses on a webpage crafted in HTML

I require assistance on how to extract individual values from an HTML page. I received a response from the PAYU payment gateway team in HTML format, but I need to retrieve specific attribute values related to the transaction details. Below is the response ...

javascripthtmlangularjsjson

Show all column data when a row or checkbox is selected in a Material-UI datatable

I am currently working with a MUI datatable where the properties are set as below: data={serialsList || []} columns={columns} options={{ ...muiDataTableCommonOptions(), download: false, expa ...

javascriptreactjsmaterial-uimui-datatable

Why does NPM not install the most recent version of the package during an update?

After installing nodemon using the command 'npm i nodemon', I always get the latest version, which is currently 2.0.2. However, if I decide to install an older version using another command, such as npm i someolderemail, and then try to update ...

javascriptnode.jsnpm

Executing a script within an ASP.NET MVC Project

Currently, I'm in the process of developing a project in MVC that requires using AJAX to fetch XML from an external source. However, I have encountered a challenge where I am unable to directly make the AJAX call due to a XMLHttpRequest same domain po ...

javascriptjqueryajaxasp.net-mvc

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...

javahtmlseleniumclickmarquee