CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Philip Stratford
Philip Stratford

Reputation: 4733

Slide In Panel to Shrink Viewport

I've created panels which slide in from the edges of my pages plenty of times, but they usually either slide over the page content or push the page content off the opposite edge of the screen, and that's usually the desired effect.

What I'm trying to achieve now is to have a panel which slides in from the left and in doing so neither covers the page content or pushes it off the screen, but instead shrinks the viewport in which the page content is displayed. My pages are responsive, so if I manually resize my browser window, making it a bit narrower, everything on the page resizes quite nicely. That's the effect I want to achieve with my sliding in panel, leaving all of the page content visible and functional, but just in a slightly narrower viewport, with the new panel taking up the remaining width.

I've tried various ways of doing this, but nothing has worked so far. I've tried to think of what sample code might be useful, but since I don't have anything that remotely works and what I'm describing is, in theory, quite simple, hopefully just this description will suffice.

Upvotes: 2

Views: 499

Answers (1)

PixelAcorn
PixelAcorn

Reputation: 494

My recommendation would be to use display: flex; on the body tag.

Example:

$('.nav-open').click(function(e) {
  $("#sidebar").toggle("slide");
});
body {
  background-color: white;
  font-family: sans-serif;
  text-align: center;
  padding-top: 30px;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  margin: 0;
}
#mainContent {
  background-color: red;
  height: 250px;
  width: 100%;
}
/*For the sidebar*/

.nav-open {
  height: 30px;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  top: 0;
  background-color: gray;
}
div#sidebar {
  min-width: 50%;
  background-color: #d4d2cb;
  display: none;
  min-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-open">
  Open Sidebar
</div>
<div id="sidebar">
  Sidebar
</div>
<div id="mainContent">This is the main page</div>

Upvotes: 3

Related Questions