What are some effective strategies for keeping content from shrinking in a drawer menu?

Question

What are some effective strategies for keeping content from shrinking in a drawer menu?

I am currently using a tutorial from https://www.w3schools.com/howto/howto_js_sidenav.asp to create a drawer sidebar menu.

However, in my scenario, I need to include a wall of text instead of <a> links. The issue I am facing is that the text expands and contracts when the drawer is opened and closed. https://jsfiddle.net/52qukbow/

function openNav() {
  document.getElementById("mySidenav").style.width = "500px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

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;
}

.content {
  color: white;
}

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

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="content">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  </div>
</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>

How can I prevent the content inside the drawer menu from expanding and contracting when the drawer is opened and closed?

javascript html css

Answer 1

Answer №1

If you're looking to learn things correctly, I suggest staying away from using w3schools. There are numerous tutorials out there that are much better. For references, I would recommend using MDN instead.

Instead of using <a> for non-links, opt for <button> for actions you want to perform.
Utilize classes and toggle them for states rather than manipulating them with JavaScript for things that can be accomplished using CSS.
Avoid changing properties that trigger re-paints for better performance. For example, using translate instead of width will just move the element without causing a re-paint.

I prefer using class querySelector over onClick. While there are some CSS adjustments I would make, I have only made changes relevant to the question.

const toggleNavigationActions = document.querySelectorAll('.js-toggle-navigation')

toggleNavigationActions.forEach(function(action) {
  action.addEventListener('click', function() {
    const slideOutNavigation = document.querySelector('#slide-out-navigation')
    slideOutNavigation.classList.toggle('sidenav--is-open')
  })
})

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 500px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: transform 240ms ease-out;
  padding-top: 60px;
  transform: translateX(-500px);
}

.sidenav--is-open {
transition: transform 240ms ease-in;
  transform: translateX(0);
}

.content {
  color: white;
}

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

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
}

<div id="slide-out-navigation" class="sidenav">
  <button class="closebtn js-toggle-navigation">&times;</button>
  <div class="content">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae...
  </div>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<button style="font-size:30px;cursor:pointer" class="js-toggle-navigation">&#9776; open</button>

Answer 2

If you're looking to learn things correctly, I suggest staying away from using w3schools. There are numerous tutorials out there that are much better. For references, I would recommend using MDN instead.

Instead of using <a> for non-links, opt for <button> for actions you want to perform.
Utilize classes and toggle them for states rather than manipulating them with JavaScript for things that can be accomplished using CSS.
Avoid changing properties that trigger re-paints for better performance. For example, using translate instead of width will just move the element without causing a re-paint.

I prefer using class querySelector over onClick. While there are some CSS adjustments I would make, I have only made changes relevant to the question.

const toggleNavigationActions = document.querySelectorAll('.js-toggle-navigation')

toggleNavigationActions.forEach(function(action) {
  action.addEventListener('click', function() {
    const slideOutNavigation = document.querySelector('#slide-out-navigation')
    slideOutNavigation.classList.toggle('sidenav--is-open')
  })
})

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 500px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: transform 240ms ease-out;
  padding-top: 60px;
  transform: translateX(-500px);
}

.sidenav--is-open {
transition: transform 240ms ease-in;
  transform: translateX(0);
}

.content {
  color: white;
}

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

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
}

<div id="slide-out-navigation" class="sidenav">
  <button class="closebtn js-toggle-navigation">&times;</button>
  <div class="content">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae...
  </div>
</div>

<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<button style="font-size:30px;cursor:pointer" class="js-toggle-navigation">&#9776; open</button>

What are some effective strategies for keeping content from shrinking in a drawer menu?

Answer №1

Similar questions

Using Javascript to Treat an HTML Document as a String

Issues with Implementing Custom CSS Styles in ag-grid

Can someone show me the JavaScript code to split a string at every instance of ' '?

Using jQuery to pass UI positions as percentages instead of screen positions

What is the best way to extract the value from a JSON URL?

Unable to access property within JSON object sent via POST request

Developing a fresh Outlook email using a combination of javascript and vbscript

Unable to delete the margin of Material-ui TextField

Is it possible to maintain child divs in a single line?

Guide on incorporating one element into another with jquery

5% of the time, Ajax fails and the response is "error"

Other Components take turns submitting the form in one Component

I wonder where the file from the HTML form download has originated

Having trouble locating the nivoslider IE8 jQuery bug, can't seem to track it

Could the issue lie with PHP or the caching system?

The link that has been clicked on should remain in an active state

Dygraphs.js failing to display the second data point

Angular 2 is not recognizing the element 'router-outlet'

Executing a function a specific number of times in Jquery

The dropdown login form is malfunctioning on my Wordpress website