On my webpage, I have a slide-out sidebar that shifts the other contents and causes overflow with a scrollbar. I want the content to remain inside the window and adjust according to the available space.
Image of Slide-out Sidebar
As seen in the image, the content stays inside the window without overflowing. However, when we open the slide-out sidebar, it causes the remaining content to overflow. Please refer to the following image where the content goes outside the window.
I would like the content to adjust according to the window size without overflowing. This applies to tables as well - they should adjust based on the window width but not overflow.
Using CSS, HTML, and JavaScript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Implementing Swipeable Side Menu</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
overflow:hidden;
font-family: helvetica;
font-weight: 100;
}
.container {
position: relative;
height: 100%;
width: 100%;
left: 0;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-ms-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
.container.open-sidebar {
left: 240px;
}
.swipe-area {
position: absolute;
width: 50px;
left: 0;
top: 0;
height: 100%;
background: #f3f3f3;
z-index: 0;
}
#sidebar {
background: #DF314D;
position: absolute;
width: 240px;
height: 100%;
left: -240px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
/* Remaining CSS styles omitted for brevity */
</style>
<script type="text/javascript">
$(window).load(function(){
$("[data-toggle]").click(function() {
var toggle_el = $(this).data("toggle");
$(toggle_el).toggleClass("open-sidebar");
});
$(".swipe-area").swipe({
swipeStatus:function(event, phase, direction, distance, duration, fingers)
{
if (phase=="move" && direction =="right") {
$(".container").addClass("open-sidebar");
return false;
}
if (phase=="move" && direction =="left") {
$(".container").removeClass("open-sidebar");
return false;
}
}
});
});
</script>
</head>
<body>
<div class="container">
<div id="sidebar">
<ul>
<li><a href="demo3.html">Home</a></li>
<li><a href="#">>Explore</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
<div class="main-content">
<div class="swipe-area"></div>
<a href="#" data-toggle=".container" id="sidebar-toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="content">
<h1>Creating Swipeable Side Menu Forthe Web</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
</div>
</body>
</html>