How can we avoid images from collapsing when we close the side navigation?

Is there a way to prevent my image from shrinking gradually when I close my side navigation?

I used an example from w3schools for a basic side navigation that slowly transitions its width to 0px when closed.

However, I noticed that the image I added to this navigation doesn't maintain its size as the rest of the content does. Instead, it keeps getting smaller until it's out of view.

I would like the image to keep its dimensions and close slowly along with the other content. The current behavior looks unnatural to me.

I'm having trouble finding solutions to this issue because I'm not sure what is causing it. Could it be related to collapsing margins or overflow? I'm unsure what to search for, so I apologize if this question has already been asked before.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
  img {
    width:100%;
  }

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

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div>
    <img src="https://i.vgy.me/PguXpb.jpg" alt="PguXpb.jpg" >
  </div>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
   
</body>
</html>

javascripthtmlcss

Answer №1

Here is the code snippet you might be looking for:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
  img {
    width:250px;
  }

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

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div>
    <img src="https://i.vgy.me/PguXpb.jpg" alt="PguXpb.jpg" >
  </div>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>
   
</body>
</html>

Answer №2

After investigating, I discovered the issue was due to my images having a width set to 0. This caused them to transition slowly along with the div that had a .5s transition property.

This resulted in a slow morph effect taking place.

To resolve this, I decided to give my image a fixed width equal to that of my side navigation - problem solved!

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

Encountering a problem with SVG integration in Gatsby with Typescript

In my current project, I am experimenting with using SVG in a Typescript page in Gatsby. To achieve this, I decided to utilize the Gatsby plugin called . //gatsby-config.js { resolve: "gatsby-plugin-react-svg", options: { ...

javascriptreactjstypescriptgatsby

Ways to retrieve the JSON key value pair in a customized format

I have a JSON array structured like this: var region= [{"af":"Africa"},{"as":"Asia"},{"au":"Australia"}] Within the framework I am using, the values of the above array are accessed in the following way: {for r in regions} <option value="${r}" &g ...

javascriptjson

Click on the button to convert the content of the text area into a variable

Is there a way to capture all the text inside a textarea or input field as a variable upon button click using jQuery or JavaScript? The .select() function doesn't seem to achieve this, instead displaying numerous CSS properties when logged. What app ...

jqueryhtml

PHP: Using conditional statements to adjust datetime formatting for CSS styling

My title may not make sense, as I am new to PHP. I'm trying to create a custom member tag for my forum that shows "X Years of Experience" with different colors based on the number of years. For example, red for under 6 months, blue for year one, yell ...

phphtmlcssdatetime

Is the eval() function initially used to directly translate the evaluated string?

Try running this code snippet in your browser: eval("(function() { console.log(JSON.parse('" + JSON.stringify('THIS IS COOL') + "')); })()"); It will output THIS IS COOL, however, if you run the following: eval("(function() { console ...

javascriptjsonevalquotes

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

I encountered an issue when trying to load an image from a local directory in my Next.js application Failed to compile ./pages/components/image.png 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to hand ...

javascriptreactjswebpacknext.jsurlloader

Setting a Custom Header for all xmlHttpRequests can be done by following these steps

I need to include custom headers in all AJAX requests. I have successfully achieved this using the code below, but there is one case where it's not working. $.ajaxPrefilter(function (options) { if (!options.beforeSend) { options.be ...

javascriptjqueryasp.netajaxasp.net-mvc-4

Get rid of all the formatting on an HTML button or submit

Is there a method to entirely eliminate the styling of a button in Internet Explorer? I am utilizing a CSS sprite for my button and everything appears fine. However, when I click on the button, it shifts slightly upwards which distorts its appearance. Are ...

htmlcssinternet-explorerbuttonstate

Error: Unspecified process.env property when using dotenv and node.js

I'm encountering an issue with the dotenv package. Here's the structure of my application folder: |_app_folder |_app.js |_password.env |_package.json Even though I have installed dotenv, the process.env variables are always u ...

javascriptnode.jsnpmenvironment-variables

Removing all items with a specific ID and its related items in Javascript: How to achieve this recursively?

I am currently facing some challenges in figuring out the most effective approach for this scenario. For example, consider the data structure below: const arr = [{ parentId: 1, children: [ { childId: 11 }, { childId: 21 }, { childId: 31 }, ...

javascriptarraysrecursion

Encountering issues with certain Bootstrap components while integrating with ReactJS

I'm currently experimenting with Bootstrap components such as Modals and Popovers, but I'm facing an issue where nothing is being displayed. Specifically, when I attempt to click on the button to show the modal Fading or popover, nothing happens. ...

javascriptreactjsbootstrap-4

Tips for avoiding the lower section of your webpage from being cut off on mobile devices

I am trying to create an overlay on top of an Ionic page that should appear right after the ion-content section. However, I am encountering an issue where the lower part of the overlay, where an arrow starts, is not visible on my Moto X Play device. How c ...

htmlcssionic-framework

Is there a way to display "Loading" text upon clicking a button using angular.js?

Check out this unique progress bar code snippet: <svg class="center-block progress-bar-round" width="200" height="200"> <circle cx="100" cy="100" r="90" fill="none" stroke=& ...

javascriptangularjs

Why is the content not being displayed even though a nav pill is selected and active?

My goal is to create a single page for multiple user types instead of separate views for ADMIN and USER. I want to display different elements based on the user's privilege level. Here is the code I came up with: <html lang="en" xmlns:sec= ...

htmljquerycssspring-bootbootstrap-4

Uncommon problem with generating links

I am facing an issue with creating a link in the header bar of a website that was developed by another company. Despite having some HTML experience, I'm struggling to resolve this problem. The link I created for a page named gallery.php within the sam ...

phphtmlcss

Ways to expand the `Array.prototype` from an external library in a Node.js environment

While enjoying my time on hackerrank with pure JavaScript, I decided to steer clear of extra arrays or math libraries, unlike the convenience of using python. My approach is robust, but now I'm considering utilizing sugar.js or underscore. I came acr ...

javascriptnode.jsnpm

Modify route title and component if user is authenticated

I've successfully implemented a login feature in my Nativescript-Vue application that utilizes the RadSideDrawer component. My current challenge is to change the route from 'Login' to 'Logout', and I'm struggling to find a wa ...

javascriptvue.jsvuejs2nativescriptnativescript-vue

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss

What could be the reason for the CORS failure when making requests from an HTTPS domain to an HTTP localhost

I have a secure rest service (implemented as an Azure Function), hosted on HTTPS, under domain A. My website is also running securely on HTTPS but on domain B. I've set the CORS to use a wildcard *. Using jQuery on my website, I send Ajax requests ...

javascriptajaxrestcorsazure-functions

Experimenting with HttpClient request using callFake() method

I am currently facing a challenge while trying to devise a spec for testing a method within my Angular service that initiates a GET request. The main issue I'm encountering is how to simulate the method returning an error instead of the expected respo ...

javascriptangularunit-testingjasminehttpclient