My Development Notes

Programming Made Easier

A Floating Slide-In and Slide-Out Container in HTML, CSS and JavaScript with source code

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");
}

Posted

in

,

by

MyDevelopmentNotes

Tags:

,

Leave a Reply