Struggling with determining the perfect transition speed for the sidemenu display

I'm a newcomer to web development and facing an issue with setting the transition speed for opening and closing this side menu. Despite adding transitions in the CSS and specifying duration in the Javascript, the menu continues to open instantly. I did my research before reaching out here, but none of the solutions seemed to work. Any help from you all would be greatly appreciated.

function openNav() {
    document.getElementById("mySidepanel").style.width = "250px";
document.getElementById("mySidepanel").style.transitionDuration = "0.5s";
    document.getElementById("mySidepanel").style.display = "block";
    document.getElementById("openbtn").style.display = 'none';
  }
  
function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";
document.getElementById("mySidepanel").style.transitionDuration = "0.5s";
    document.getElementById("mySidepanel").style.display = "none";
    document.getElementById("openbtn").style.display = "inline-block";
  }
/** Navigation Bar **/

.sidepanel {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgba(17, 17, 17, 0.425);
  overflow-x: hidden;
  padding-top: 60px;
  transition: all 0.5s ease-in-out;
}

.sidepanel a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  font-family: "lato", sans-serif;
  color: #818181;
  display: block;
}

.sidepanel a:hover {
  color: #f1f1f1;
}

.sidepanel #closebtn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 36px;
  margin-left: 50px;
}

#openbtn {
  font-size: 30px;
  cursor: pointer;
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 10px 15px;
  border: none;
  float: right;
}

#openbtn:hover {
  background: -webkit-linear-gradient(#748df0c9, #324dbbc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

a:hover .fas {
  color: #3e5ddac9;
  text-shadow: 0 0 5px #3e5ddac9;
}
a:hover .far {
  color: #3e5ddac9;
  text-shadow: 0 0 5px #3e5ddac9;
}
<div id="mySidepanel" class="sidepanel" style="display: none;">
   <a href="javascript:void(0)" id="closebtn" onclick="closeNav()">×</a>
   <a href="/"><i class="fas fa-home"></i></span> Home</a>
   <a href="emojis.html"><i class="far fa-laugh-beam"></i> Emojis</a>
</div>
  
<button id="openbtn" onclick="openNav()">☰</button>

The JavaScript is responsible for hiding and showing the open button when the sidebar is visible. I attempted setting a transitionDuration within it, but unfortunately, that also did not yield the desired results.

javascripthtmlcss

Answer №1

Transitions cannot be applied to the display property, but since you are already utilizing width, stick to that for smooth functionality. There's no necessity to alter transition effects using Javascript as they are already specified in your CSS.

function openNav() {
    document.getElementById("mySidepanel").style.width = "250px";
    document.getElementById("openbtn").style.top = '-50px';
  }
  
function closeNav() {
    document.getElementById("mySidepanel").style.width = "0";

    document.getElementById("openbtn").style.top = '10px';
  }
/** Navigation Bar **/

.sidepanel {
  width: 0;
  position: fixed;
  z-index: 1;
  height: 100%;
  top: 0;
  right: 0;
  background-color: rgba(17, 17, 17, 0.425);
  overflow-x: hidden;
  padding-top: 60px;
  transition: all 0.5s ease-in-out;
}

/* Remaining CSS code is unchanged */

Edit: The position has been updated to fixed and the button has been adjusted vertically.

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

Struggling to create a responsive navbar for a landing page using Next.js and TailwindCSS

I'm currently working on a landing page using nextjs, tailwind css, and shadcnui. The design looks great on desktop with a logo and two links, but it's not responsive on smartphones. https://i.stack.imgur.com/HVQsa.png On mobile devices, the lay ...

cssreactjsnext.jstailwind-css

When I try to pass a variable as a prop to another .js file, it mysteriously transforms into an undefined value

Upon successful login, my app file sets the isAuthenticated variable to true and redirects to the /admin page. The Firebase API call is functioning as expected, allowing access only with a valid username and password. The issue arises when I try to hide t ...

javascriptreactjs

Socket.io continuously refreshing and updating multiple instances

Incorporating socket.io into a small React application, I configured all the listeners within the "componentWillMount" method. See the code snippet below for reference: componentWillMount() { const socket = io(); socket.on('update', f ...

javascriptnode.jsexpressreactjssocket.io

How to automatically set a default bootstrap tab upon page load using an MVC JsonResult responseData

I'm looking to enhance the user experience on my dashboard by allowing users to set their preferred default tab view upon logging in. Using an AJAX call to retrieve the value from the database in MVC, I am working on the JS/Razor side of things to mak ...

jquerycsstwitter-bootstrap

Text that spans across multiple lines

I have a multi-line text that I need to adapt to a div. For example: https://i.stack.imgur.com/mtZmf.png Is there a way to adjust the text within the div? Can we prevent the blue spacing after the word "text" using CSS? If I have various texts of differ ...

htmlcss

X-editable does not verify if the checklist values are checked

Hello everyone, currently I am working on a Laravel project where I have implemented the X-editable library for inline editing functionalities. I am facing an issue with updating a many-to-many relationship table (pivot table) and I am trying to use the X- ...

javascriptphpjquerylaravelx-editable

Ways to verify the authenticity of a JWT token

I recently came across a tutorial on creating user authentication with Vue.js and Lumen. The tutorial utilizes the tymon/jwt-auth library to handle authentication. So far, everything is working smoothly. The API manages all my data and provides a token to ...

javascriptlaravelvue.jslumen

Tips for integrating scroll-snap and jQuery's .scroll() function together

I'm facing challenges in integrating both of these elements into the same project. When I activate overflow: scroll, my jQuery function does not work as expected. However, if I deactivate it, then the jQuery works but the scroll-snap feature does not ...

jquerycssscroll

Unique column arrangement specifically designed for the initial row within the loop

My webpage features a layout that showcases 4 images on each row. However, I am looking to create a special first row with a unique column configuration compared to the rest of the rows. Here is an example of what I have in mind: This particular row will ...

javascriptnode.js

Understanding JavaScript Regular Expressions

To ensure that no HTML tags are entered into a textarea, I am utilizing the following regex for validation. If any HTML tags are detected in the textarea, I need to display a validation message. The regex being used is: /<(\w+)((?:\s+\w ...

javascripthtml

"Using JavaScript to trigger a button click event, and then

I have a question that I think may sound silly, but here it is. I have this code snippet: <script type="text/javascript"> $(document).ready(function(){ var email_value = prompt('Please enter your email address'); if(email_value !== null){ ...

javascriptphpjqueryajax

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

css

jQuery's find method returns a null value

During my Ajax POST request, I encountered an issue where I wanted to replace the current div with the one received from a successful Ajax call: var dom; var target; $.ajax({ type: "POST", url: "http://127.0.0.1/participants", data: "actio ...

javascriptjqueryajax

Tips for extracting particular information from a website and displaying it within my application

While I have searched for a solution to my problem, I couldn't find an answer that fits my specific needs. I am attempting to extract specific information (highlighted in red) from this website: . I understand that JSON parsing can retrieve this data, ...

androidhtmljsonparsingweb-scraping

Guide to designing a progress bar using numerical data stored in a database

I am currently working on a project to create a dynamic progress bar based on numeric values stored in a database. The database has two fields, 'NEXT_STEP' and 'MAX_STEPS'. When the value of NEXT_STEP reaches MAX_STEPS + 1, it indicates ...

phphtmlajaxoracle

Tips on updating a specific value within an element stored in an array

I'm currently in the process of setting up a table where each row contains unique values. Using a for loop, I am able to generate these rows and store them in an array. Now, my question arises when I consider modifying a particular value with the id " ...

javascriptjqueryhtmlcss

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

javascripthtmlangularjstypescript

Tips for effectively reusing the modal component in Vue.js without encountering re-render issues

I'm encountering an issue where the same component content is being rendered despite having different components (Rendering problem). I have a reusable modal component called modal.vue, so every time I create a new component, I call the modal compone ...

javascriptvue.js

ReactJS - troubleshooting webcam video stream issue

I can't figure out why this code is not working properly. I am able to access the camera stream and see the light on my camera indicating that it's working, but the stream doesn't seem to be attaching correctly. class VideoOutput extends ...

javascriptreactjshtml5-videowebcam