CODEWITHSUNDEEP
javascripthtmlcss
D Shore
D Shore

Reputation: 23

How to push elements "off screen" using HTML and CSS

I've been trying to design a mobile website and I have been using W3schools for guidance. I successfully implemented a simple side menu from W3Schools, however, when in mobile view it pushes an image below and not off the screen.

How would I change this, as I want to push all contents of the div of screen and not squash them.

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_shift - this is the example I am using. I want to push the car image off the screen and not shrink it.

Thanks for any help, I appreciate it.

Dean

Upvotes: 2

Views: 5873

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

You could achieve this effect in several ways: in this example the basic idea is to place side-by-side two elements having their total width greater than 100% (for example with flexbox).

Then apply a negative margin-left to the menu element (aside) so to place it off-screen and set the margin to 0 (with a CSS transition) to show it.

The button belongs to the menu element, but it is visually placed on the content area with an absolute position and a negative right offset.

let menu = document.querySelector('aside');
let menuBtt = menu.querySelector('button');
menuBtt.addEventListener('click', ()=>menu.classList.toggle('visible'));
                      
.container {
  overflow-x: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

aside, main { 
  box-sizing: border-box; }

aside {  
  position: relative;
  min-width: 250px; 
  margin-left: -250px;
  transition: margin .4s; }

main  {  min-width: 100%;  }

aside button {
  position: absolute;
  z-index: 1;
  right: -50px;
  top: 0;
  line-height: 40px;
  width: 40px;
  border: 0;
  font-size: 2rem;
  background: none;
  cursor: pointer;
  transition: color .4s;
}

aside.visible {
  margin-left: 0; 
}



aside.visible button {
   color: #62616c; }






aside  { background: #f2f2f2; font: 1.1rem/1.3 Arial; padding: 10px; }
aside button:focus { outline: 0; }
h2 { margin: 0; }
main { font: 0.9rem/1.6 Arial; padding: 60px 20px; }
main img { width: 100%;}
<div class="container">
  <aside class="menu">
    <button>&#x2630;</button>
    
     <h2>Main Menu</h2>
     
   </aside>

  <main>
     <img src="http://placekitten.com/500/320" /> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac dictum justo. Integer venenatis orci sed nulla malesuada finibus. Maecenas tellus metus, porta nec euismod quis, pellentesque vitae enim. Pellentesque id metus condimentum, aliquet lorem eget, pretium magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus leo id turpis interdum, eu fermentum elit auctor. Nulla ornare accumsan elit a scelerisque. Nam a dolor nec orci condimentum dignissim ac eget justo. Donec ligula quam, sagittis vel pretium et, auctor at odio. Quisque laoreet feugiat elit. Mauris sit amet urna vel risus mattis pharetra.</p>
  </main>
</div>

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324750

Using margin-left:25% changes the (implied) width to 75%, resulting in a smaller content area. This interferes with your text layout as well as the image's size.

Consider instead using transform:translateX(25%) or even position:relative; left:25% - both of these will produce the same result: shifting the content by 25% of the width (albeit in different ways).

You will of course need to change the transition from margin-left 4s to transform .4s or left .4s as desired.

Upvotes: 0

Related Questions