Here’s an easy method to create a fully functional slide-in and slide-out container using HTML, CSS and vanilla JavaScript. Below is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="navbar">
<div class="logo"><a href="#">Site Logo</a></div>
<div class="menu-btn">
<button id="menu-btn" onclick="slideIn()">></button>
</div>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores animi
explicabo, tempora laboriosam omnis sapiente eligendi consequuntur
consectetur ratione labore perferendis, sed, mollitia adipisci dolorem?
Excepturi impedit odio officiis voluptatem magnam. Pariatur dolorum quis
commodi consequuntur natus, eos omnis corporis in deleniti, consectetur
aperiam nobis aspernatur corrupti reprehenderit facilis fugit enim magni
quo. Voluptatem odio, ipsa laboriosam excepturi nisi minus est aperiam,
quasi non facere quod repellat quisquam ipsum ipsam nobis vitae modi iusto
placeat asperiores voluptate doloremque delectus similique officia! Quam,
voluptate? Laudantium, facere in voluptatum officia unde molestias error
ipsa totam eveniet sed, assumenda at fuga perferendis magni alias debitis
aliquid quidem maxime sequi! Iste, aut quam. Est officiis officia
recusandae sit! Nobis placeat numquam ad minima molestias dolore eveniet
similique reiciendis voluptatibus veniam obcaecati illum corrupti,
doloribus voluptates, eius esse beatae inventore magni ipsam. Quidem nihil
qui consectetur doloremque? Possimus et soluta expedita aperiam distinctio
voluptatem voluptatum unde harum nulla. Velit ex harum earum fugiat quos,
excepturi sed tenetur ab! Ratione reprehenderit voluptatibus totam porro,
sequi labore, fuga, sapiente nostrum rerum facilis sint? Debitis ipsam
mollitia dolorem voluptatibus reprehenderit sint nisi quidem recusandae?
Accusamus aliquid cum doloremque explicabo maxime alias? Ratione,
mollitia? Hic iusto, quasi dolorem sint commodi voluptatem accusantium?
Placeat qui cumque, perspiciatis ipsum at aliquid commodi rem magni? Quae
ad, dignissimos alias illo ducimus quia eaque maiores porro magnam ullam
adipisci! Itaque qui minima atque tempora doloremque sint libero aperiam
ex. Iure at aperiam fugiat expedita eos aliquid ut sapiente possimus sunt
veniam enim saepe nam consequuntur harum dolor, velit asperiores
repellendus dicta debitis esse modi praesentium? Molestias delectus eos
voluptatem consectetur fuga. Neque veritatis corporis alias similique quam
et sunt eos qui officia nisi quod cum vero sed ut blanditiis nesciunt
laudantium, delectus ex eius consequuntur? Suscipit, exercitationem?
Ducimus autem expedita a non maiores harum animi quis corrupti, eligendi
odio sint sit reiciendis maxime tenetur eos vero! Maiores consectetur
incidunt nobis amet quidem. Rem ipsam iure provident atque, temporibus
animi maiores tenetur quasi quo expedita magni ad soluta? Esse commodi
molestiae dolor ad laborum? Necessitatibus earum eum accusamus? Saepe
aliquid minima aperiam labore quos magnam quae tenetur qui vero
consectetur reprehenderit omnis possimus tempora deserunt amet beatae,
molestiae illo quis ea, dicta et odit eveniet. Quaerat optio accusamus
praesentium molestiae neque. Laboriosam sapiente non quo, pariatur quia
natus fuga consectetur dolorem? Cupiditate tempore eos, illum ratione
magnam alias sapiente quisquam fugit dolores. Aut modi excepturi, at
sapiente in tenetur, nobis nostrum officiis ex maiores labore! Quia error
voluptates sint voluptas vel facere eligendi animi, impedit amet eos
corporis cupiditate? Aperiam iure officiis laboriosam deleniti error quos
quidem fugit provident. Suscipit quo deleniti animi aperiam laboriosam ad
officia quaerat eos sapiente unde quibusdam, asperiores similique ab odio!
Quisquam suscipit, ratione vel quos tenetur omnis, consequuntur deleniti
maiores veritatis id quam velit numquam? Delectus fugit ullam facere,
optio enim officiis nulla dolor ex totam nesciunt ipsa excepturi eius,
doloremque odit quia! Molestiae id eligendi enim? Quaerat delectus ducimus
eos molestiae necessitatibus dolor ea fuga maxime! Hic architecto itaque
beatae minima ut neque! Voluptatum in culpa debitis sed quam ipsum
voluptates dolores veniam harum voluptatibus quidem necessitatibus saepe
accusamus explicabo ipsam placeat rerum similique, ut magni! Distinctio
accusamus eius reprehenderit error cumque commodi id iure perspiciatis ab
quas ad et voluptatum blanditiis, amet neque at eaque corrupti est
quisquam. Nemo, voluptatum tempore, delectus impedit ratione laborum
nesciunt modi laboriosam asperiores rerum officiis non ex dicta omnis
eveniet optio expedita doloremque deleniti tenetur amet illo mollitia
architecto. Eius odit id tempora doloribus illum deserunt ex soluta ab.
</p>
<div class="slide-menu" id="menu-card">
<div class="close">
<button id="close-btn" onclick="slideOut()">X</button>
</div>
<div class="pages">
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Investor Relations</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
This is a floating container. Observe the CSS code syntax below to see how it’s implemented. The class slide-dynamic is created and will be implemented by a JavaScript function.
body {
margin: 0;
overflow-x: hidden;
}
a {
text-decoration: none;
}
.navbar {
display: flex;
justify-content: space-between;
padding: 1%;
}
.slide-menu {
display: flex;
flex-direction: column;
background-color: aqua;
padding: 1%;
padding-bottom: 10%;
position: fixed; /* floating menu */
top: 40px;
width: 99%;
transition: transform 0.5s ease-in; /* default */
transform: translateX(100%); /* default */
}
.slide-dynamic {
transform: translateX(0%); /* dynamically created */
}
.close {
display: flex;
justify-content: end;
padding: 4%;
}
.pages {
display: flex;
flex-direction: column;
}
.pages a {
text-align: center;
}
function slideIn() {
var clickToSlide = document.getElementById("menu-card");
clickToSlide.classList.toggle("slide-dynamic");
}
function slideOut() {
var clickToSlide = document.getElementById("menu-card");
clickToSlide.classList.remove("slide-dynamic");
}