position div with auto width left of screen

Solution 1:

Don't use jQuery
Use CSS and transform translate, and transition for the desired animation
Use JavaScript to Element.classList.toggle() a desired CSS class — that will transition the element from left -100% (of its own width) to left 0%.
use a <button type="button"> if you actually need a button. Anchors are for something else (Navigation).

const EL = (sel, par) => (par||document).querySelector(sel);

EL("#toggle").addEventListener("click", () => {
  EL("#menu").classList.toggle("is-open");
});

/* QuickReset */
* {
  margin: 0;
  box-sizing: border-box;
}

#toggle {
  position: fixed;
  right: 0;
  padding: 1rem;
  /* hopefully you know how to style a Button */
}

#menu {
  position: fixed;
  padding: 30px;
  width: calc(100vw - 100px); /* or whatever you want, does not matters */
  height: 100vh;
  background: gold;
  transition: transform 0.5s; /* transition property and duration */
  transform: translateX(-100%); /* -100% of self-width (hidden) */
}

#menu.is-open {
  transform: translateX(0%); /* (visible) */
}

<div id="menu">I am something that actually toggles</div>

<button type="button" id="toggle">Toggle</button>

position div with auto width left of screen

Solution 1:

Related

Recent Posts