<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="sidebar"> <button class="close_button">×</button> <!-- Sidebar content comes here --> <p>Hello World!</p> </div>

/* styles.css */ * { margin: 0; padding: 0; box-sizing: border-box; } .sidebar { position: fixed; bottom: 0; left: 0; height: 60%; border-top: solid 1px #969696; border-radius: 15px 15px 0 0; width: 100%; box-shadow: 4px 3px 8px 1px #969696; animation: slide-up ease-out 400ms forwards; background: #fff; z-index: 1000; } .sidebar p { padding: 1rem; } @media (min-width: 768px) { .sidebar { top: 0; height: 100%; left: unset; right: 0; width: 40%; border-top: unset; border-left: solid 1px #969696; border-radius: 15px 0 0 15px; animation-name: slide-left; } } .close_button { position: absolute; top: 1rem; right: 20px; background: #000; border: none; width: 30px; height: 30px; color: #fff; font-size: 130%; border-radius: 15px; display: flex; justify-content: center; align-items: center; padding: 0; cursor: pointer; } @media (min-width: 768px) { .close_button { left: 90%; } } .close_sidebar { animation-name: slide-down; } .hidden { display: none; } @media (min-width: 768px) { .close_sidebar { animation-name: slide-right; } } @keyframes slide-up { 0% { height: 0; } 100% { height: 60%; } } @keyframes slide-down { 0% { height: 60%; } 100% { height: 0; } } @keyframes slide-left { 0% { width: 0; } 100% { width: 40%; } } @keyframes slide-right { 0% { width: 40%; } 100% { width: 0; } }

// scripts.js const openHandler = () => document.querySelector(".sidebar").classList.remove("hidden"); const closeHandler = () => { document.querySelector(".sidebar").classList.add("close_sidebar"); setTimeout(() => { document.querySelector(".sidebar").classList.add("hidden"); document.querySelector(".sidebar").classList.remove("close_sidebar"); }, 400); }; document .getElementById("open_sidebar_button") .addEventListener("click", openHandler); document.querySelector(".close_button").addEventListener("click", closeHandler);