I have a simple project. In that project, I have a drawer that works with translateX. My problem is that when I open that drawer, my main content goes outside the page.
this issue is showed in these two pictures
I want the content not to go outside the page when the drawer is opened, but I don’t know the best way to handle this.
The code is like below
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1200px;
margin: auto;
padding: 0 10px;
}
.header {
display: flex;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid lightcoral;
}
.hamburger {
cursor: pointer;
}
.contents {
display: flex;
gap: 10px;
}
.drawerContainer {
position: relative;
}
.drawer {
position: absolute;
background-color: lightcoral;
transform: translateX(-100%);
transition: all 0.2s ease-in-out;
padding: 20px;
width: 320px;
}
.drawer.open {
transform: translateX(0);
}
.content {
transition: all 0.2s ease-in-out;
}
.transformContent {
transform: translateX(320px);
}
</style>
</head>
<body>
<header class="header">
<div class="hamburger">
Hamburger Menu
</div>
<div>
Other content
</div>
</header>
<div class="contents">
<div class="drawerContainer">
<div class="drawer">
This is Drawer
</div>
</div>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, cupiditate dignissimos ducimus, fuga harum
ipsum
maiores mollitia nihil perspiciatis placeat quod reiciendis repellendus rerum saepe sint tenetur voluptate?
Ab
accusantium architecto asperiores beatae, consequatur delectus deleniti dignissimos dolorem doloribus
dolorum,
ea earum eius enim expedita facere illo, incidunt ipsa ipsam itaque minima molestias natus non perferendis
placeat praesentium provident quam recusandae repudiandae sapiente similique vel velit voluptates
voluptatum?
Architecto atque consequatur distinctio, dolorem eveniet, harum in incidunt labore maiores minus natus nobis
odio perferendis quis repellat suscipit totam? A asperiores consequatur cumque dicta dignissimos doloribus
est
ex facilis ipsa iste labore laborum maiores maxime minus molestias nam natus nobis obcaecati pariatur
quibusdam
quo sequi tempora tenetur ullam ut vero, voluptatem! A aliquam aspernatur aut cumque distinctio, doloribus
inventore laborum natus nesciunt perspiciatis quam soluta tenetur unde vero voluptates. Aliquid animi
architecto
asperiores atque, cum, cupiditate deleniti doloribus eaque esse et excepturi, expedita labore magni maxime
minus
mollitia nam nemo nobis odit officia officiis pariatur porro praesentium quaerat quia quos rem reprehenderit
repudiandae sequi sint suscipit temporibus tenetur voluptate! Accusamus architecto at, atque autem culpa
cupiditate debitis dolorem dolorum inventore ipsam modi nihil perspiciatis, porro quis repudiandae!
Accusantium
amet asperiores assumenda autem blanditiis corporis culpa, cum dolorem ducimus eligendi ipsum labore magnam
maxime nam pariatur provident quam quidem reprehenderit rerum sapiente, sed suscipit unde, vel voluptatibus
voluptatum! Cum cumque doloremque, dolorum fugit illo labore minima nam, perferendis possimus praesentium
quasi,
quos sequi voluptates? Aspernatur autem, ea expedita itaque iusto, laudantium mollitia porro provident quam
recusandae rerum sequi! Ad aperiam doloribus error nostrum quas quisquam sunt temporibus totam voluptas
voluptatem! Ad adipisci atque beatae, deserunt, ducimus eligendi enim eos ex fugit hic ipsa ipsum itaque
iure
laboriosam magnam maiores maxime modi numquam perspiciatis quam qui, quia quidem quis quisquam quo rem
reprehenderit sunt suscipit tempore vel velit veniam veritatis voluptates! Ab ad corporis, eos, eveniet fuga
id
maiores molestiae quaerat quam quisquam, quo repellat temporibus voluptas! A accusantium amet aspernatur
atque
consectetur culpa cupiditate, debitis doloremque eius esse et expedita fugit id in ipsa iste iure magnam
maxime
odio praesentium quam quis quos ratione recusandae repellat tenetur unde? Dolor eos est eveniet in libero
magni
minus molestiae, odio quasi quos sint vel vero voluptas? A accusantium adipisci amet aperiam, aut cum
cupiditate
debitis dolore doloribus eaque exercitationem, facilis fuga hic id illo impedit incidunt labore modi neque
nesciunt nulla officiis perspiciatis sapiente similique tenetur totam ullam vel. Debitis dolore explicabo
officiis qui. Aliquam architecto assumenda at aut blanditiis consectetur cum dicta enim et eum eveniet
fugiat
fugit inventore itaque laudantium magnam necessitatibus nesciunt nisi nostrum odio perferendis quae quaerat
quidem ratione, rem sint vero voluptates! Accusamus consectetur et facere, libero nihil perferendis
praesentium
quasi tempora. Alias illo inventore libero perspiciatis. Aliquid amet, animi assumenda debitis distinctio
dolorem laboriosam nobis officia quas ut. Ab accusantium ad beatae culpa cumque delectus dicta distinctio
dolore
ducimus eaque eius eos fuga illo iure labore molestiae molestias, nisi non nostrum placeat porro praesentium
quasi quisquam reprehenderit sapiente suscipit ut veniam veritatis, vitae voluptatum. Ab aliquid amet aut
blanditiis consequuntur deleniti dolor dolores dolorum eos in incidunt ipsam molestias mollitia nostrum
nulla
numquam obcaecati perferendis placeat quis quos recusandae repellat soluta suscipit vero vitae voluptatem,
voluptatibus? Ab aspernatur consectetur facere in quos. Laboriosam libero nam nesciunt odio. Beatae
consequatur
deserunt distinctio enim est, et harum laudantium maxime nesciunt nobis odit optio reiciendis sed ut, vel!
Adipisci amet asperiores assumenda cupiditate dignissimos, ex facilis id libero magnam maxime mollitia optio
quam, suscipit tempore voluptatem? Cupiditate, eius fuga fugiat, ipsam iusto, maiores neque officia
perferendis
provident quaerat quod totam voluptate. Dicta, est rem. Accusantium, asperiores consequuntur delectus, eaque
est
eveniet hic iste labore nesciunt nihil non nulla obcaecati odio officiis perspiciatis placeat possimus
provident, quia reprehenderit rerum sed ullam veniam? Accusantium beatae consectetur culpa dolorem, eos est
eveniet facere facilis fuga fugiat illo molestias nemo nihil obcaecati odit placeat, quaerat quasi quia
ratione
tempora ullam velit voluptates. A aspernatur delectus deleniti dolore doloremque dolorum eos excepturi
explicabo, illo iste laudantium libero molestias nemo nesciunt, odio pariatur quam quo rem totam voluptates.
Alias aspernatur atque debitis dicta dolores dolorum earum error esse eveniet in iure magni modi molestiae
nam
numquam, officiis pariatur possimus quam quia quod, recusandae rem reprehenderit suscipit tenetur totam? A
adipisci, at culpa cupiditate dolore doloribus error explicabo illo iusto laboriosam magni natus neque nisi
praesentium provident quaerat rerum sapiente, temporibus ullam ut vel vitae voluptas voluptate. Aperiam
architecto commodi debitis delectus facere illum libero nesciunt nihil, nulla numquam optio perferendis
porro
quasi quidem quo rerum ullam. Accusantium animi aperiam commodi consequatur deserunt dolorem explicabo,
incidunt
labore nemo nobis officiis perspiciatis quo repellat rerum velit. Aliquid amet animi blanditiis consequuntur
culpa cum delectus deleniti dignissimos dolore doloribus earum eligendi eum, ex expedita explicabo illo
impedit
laborum magni maiores molestias nihil nostrum omnis quae quam quia quidem quisquam ratione reiciendis rem
reprehenderit saepe, sapiente sunt velit vero, voluptas voluptatem voluptatum. A architecto cumque enim,
error
impedit reiciendis sapiente suscipit voluptatum. Aliquid dolore eius ex laudantium mollitia nihil optio,
praesentium quos sapiente tempora tempore ullam! Accusamus animi dicta dolor dolorem dolorum ea facilis
fugiat
harum in ipsa ipsum libero magnam minima molestiae mollitia natus odit officiis quasi quia quod recusandae,
rem
sit tenetur vitae voluptatibus. Ad consectetur cum ducimus exercitationem nulla obcaecati pariatur rerum
sapiente? Expedita fugiat fugit ipsum maiores maxime nobis sequi vero? Beatae et nesciunt odit sapiente
ullam!
Aliquam excepturi molestiae officiis reiciendis! Adipisci, architecto atque deleniti, eaque, eum ex
excepturi
facilis fugiat harum illum ipsum possimus quisquam sed velit voluptatem? Dolores nesciunt odit omnis quasi.
Aliquam blanditiis cumque debitis delectus eaque error esse facere ipsum, iste laboriosam libero minima
minus
modi molestias necessitatibus nihil nisi nobis nulla odio officiis placeat praesentium quibusdam
reprehenderit
saepe sed, ut vitae voluptas! Animi asperiores aspernatur blanditiis consequatur corporis cupiditate dicta
dolore dolorem doloremque doloribus eius, enim exercitationem explicabo fuga hic iusto labore molestiae
mollitia
nam neque nostrum nulla perspiciatis quas quasi quia, sed sequi similique tenetur vero, voluptates! Ducimus,
praesentium sit!
</div>
</div>
</div>
</body>
<script>
const menuButton = document.querySelector('.hamburger');
const drawer = document.querySelector('.drawer');
const mainContent = document.querySelector('.content');
menuButton.addEventListener('click', () => {
drawer.classList.toggle('open');
if (drawer.classList.contains('open')) {
mainContent.classList.add('transformContent');
} else {
mainContent.classList.remove('transformContent');
}
});
</script>
</html>
2
Answers
The width of the content causes it to overflow. Subtraction width of hamburger menu from content width will eliminate overflow of body.
You can avoid this by not using
transform, and animate amarginproperty instead. You don’t have to shift the content by the width of the drawer element either.