普段は隠れているサイドバー

普段は見えないが、何かしらの動作で画面内に登場するサイドバー

https://gyazo.com/804e6658a357ba57509a11611373b9b1

実装方法

実装のやり方はいろいろあるが標準的なものは、サイドバーをHTMLで作っておき、それをCSSで画面外の場所にpositionしておいて、ある動作（クリックやらなんやら）に応じて、そのpositionを変更させるというもの。

code:sample.js

//サイドバーの設定

const sidebar = document.getElementById("sidebar");

sidebar.style.right = "-300px";

//サイドバーの開閉

function showSidebar() {

sidebar.style.right = 0;

}

function hideSidebar() {

sidebar.style.right = "-300px";

}

code:sample.css

position: fixed;

top: 0px;

right: 0px;

bottom: 0;

color:black;

width: 300px;

height: 100%;

background-color: rgba(40,40,40,1);

transition: right 0.65s ease-in-out;

z-index: 1031;/*navよりも上にする*/

}