kkebo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Flyout Example</title>
<script>
{
  // サイドバーの表示をトグルするボタンにイベントを設定
  document.addEventListener('DOMContentLoaded', _ =>
    ['.flyoutToggle', '.flyoutBackground'].forEach(selector => document.querySelector(selector).addEventListener('click', _ => {
      document.querySelector('.flyoutWrap').classList.toggle('hidden');
      document.querySelector('.flyoutToggle').classList.toggle('hidden');
    }))
  );
}
</script>
<style>
/* サイドバーの高さを 100% にするため */
html, body {
  height: 100%;
}

/* Flexbox レイアウト用 */
.flexColumn {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
}
.flexRow {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}
.flexColumn > *, .flexRow > * {
  flex: auto;
}

.fillWithLastChild > :not(:last-child) {
  flex: none;
}
.fillWithLastChild > :last-child {
  flex: auto;
}

/* サイドバー用 */
.flyoutWrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.flyoutWrap.hidden {
  visibility: collapse;
  transition: visibility 0s .5s;
}
.flyout {
  width: 320px;
  -webkit-backdrop-filter: blur(10px);
  transition: margin-left .5s ease-out;
}
@supports not (-webkit-backdrop-filter: blur(10px)) {
  /* backdrop-filter をサポートしていないブラウザでは背景色を指定 */
  .flyout {
    background-color: rgba(255, 255, 255, .9);
  }
}
.flyoutWrap.hidden .flyout {
  margin-left: -320px;
}
.flyoutBackground {
  background-color: rgba(0, 0, 0, .5);
  transition: background-color .5s ease-out;
}
.flyoutWrap.hidden .flyoutBackground {
  background-color: transparent;
}
.flyoutToggle {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  left: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background-color: #FF5252;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  transform: rotate(405deg);
  transition: transform .5s ease-out, background-color .5s ease-out;
}
.flyoutToggle.hidden {
  transform: rotate(0deg);
  background-color: #4CAF50;
}
.flyoutToggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: background-color .3s ease-out;
}
.flyoutToggle:hover::before {
  background-color: rgba(0, 0, 0, .1);
}
.flyoutToggle:active::before {
  background-color: rgba(0, 0, 0, .5);
}
.flyoutToggle > span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.flyoutToggle > span::before, .flyoutToggle > span::after {
  display: block;
  content: '';
  background-color: #fff;
  position: absolute;
  width: 50%;
  height: 10%;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.flyoutToggle > span::after {
  transform: rotate(90deg);
}

/* サンプル用 */
.flyout button {
  height: 32px;
  background-color: transparent;
  margin: 0;
  padding: 0;
  border: 0;
  transition: background-color .3s ease-out;
}
.flyout button:hover {
  background-color: rgba(0, 0, 0, .1);
}
.flyout button:active {
  background-color: rgba(0, 0, 0, .5);
}
.flyout textarea {
  background-color: transparent;
  border: 0;
  font-family: Monaco, Menlo, Consolas, 'Courier New', Courier, monospace;
  font-size: medium;
  margin: 0;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
</style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla id dolor a rhoncus. Sed vel nisl tempus metus hendrerit blandit a a nisl. Maecenas sed enim sit amet sem fringilla fermentum. Mauris elementum vehicula elit. Quisque consequat ipsum ut justo ornare volutpat. Sed varius sit amet metus nec accumsan. Nunc suscipit metus risus, id facilisis magna ullamcorper in. Fusce sollicitudin euismod dolor vitae fermentum.</p>

  <!-- サイドバー用 -->
  <div class="flyoutWrap hidden flexRow fillWithLastChild">
    <section class="flyout flexColumn fillWithLastChild">
      <!-- サイドバーの中身 (サンプルとしてボタンとテキストエリアを設置) -->
      <div class="flexRow">
        <button>Button A</button>
        <button>Button B</button>
      </div>
      <textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla id dolor a rhoncus. Sed vel nisl tempus metus hendrerit blandit a a nisl. Maecenas sed enim sit amet sem fringilla fermentum. Mauris elementum vehicula elit. Quisque consequat ipsum ut justo ornare volutpat. Sed varius sit amet metus nec accumsan. Nunc suscipit metus risus, id facilisis magna ullamcorper in. Fusce sollicitudin euismod dolor vitae fermentum.</textarea>
    </section>

    <div class="flyoutBackground"></div>
  </div>

  <!-- サイドバーの表示をトグルするボタン -->
  <button class="flyoutToggle hidden"><span></span></button>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Flyout Example</title>
	<script>
	{
	// サイドバーの表示をトグルするボタンにイベントを設定
	document.addEventListener('DOMContentLoaded', _ =>
	['.flyoutToggle', '.flyoutBackground'].forEach(selector => document.querySelector(selector).addEventListener('click', _ => {
	document.querySelector('.flyoutWrap').classList.toggle('hidden');
	document.querySelector('.flyoutToggle').classList.toggle('hidden');
	}))
	);
	}
	</script>
	<style>
	/* サイドバーの高さを 100% にするため */
	html, body {
	height: 100%;
	}

	/* Flexbox レイアウト用 */
	.flexColumn {
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	}
	.flexRow {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	}
	.flexColumn > , .flexRow > {
	flex: auto;
	}

	.fillWithLastChild > :not(:last-child) {
	flex: none;
	}
	.fillWithLastChild > :last-child {
	flex: auto;
	}

	/* サイドバー用 */
	.flyoutWrap {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	}
	.flyoutWrap.hidden {
	visibility: collapse;
	transition: visibility 0s .5s;
	}
	.flyout {
	width: 320px;
	-webkit-backdrop-filter: blur(10px);
	transition: margin-left .5s ease-out;
	}
	@supports not (-webkit-backdrop-filter: blur(10px)) {
	/* backdrop-filter をサポートしていないブラウザでは背景色を指定 */
	.flyout {
	background-color: rgba(255, 255, 255, .9);
	}
	}
	.flyoutWrap.hidden .flyout {
	margin-left: -320px;
	}
	.flyoutBackground {
	background-color: rgba(0, 0, 0, .5);
	transition: background-color .5s ease-out;
	}
	.flyoutWrap.hidden .flyoutBackground {
	background-color: transparent;
	}
	.flyoutToggle {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	left: 20px;
	bottom: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 0;
	background-color: #FF5252;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	transform: rotate(405deg);
	transition: transform .5s ease-out, background-color .5s ease-out;
	}
	.flyoutToggle.hidden {
	transform: rotate(0deg);
	background-color: #4CAF50;
	}
	.flyoutToggle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transition: background-color .3s ease-out;
	}
	.flyoutToggle:hover::before {
	background-color: rgba(0, 0, 0, .1);
	}
	.flyoutToggle:active::before {
	background-color: rgba(0, 0, 0, .5);
	}
	.flyoutToggle > span {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	}
	.flyoutToggle > span::before, .flyoutToggle > span::after {
	display: block;
	content: '';
	background-color: #fff;
	position: absolute;
	width: 50%;
	height: 10%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	.flyoutToggle > span::after {
	transform: rotate(90deg);
	}

	/* サンプル用 */
	.flyout button {
	height: 32px;
	background-color: transparent;
	margin: 0;
	padding: 0;
	border: 0;
	transition: background-color .3s ease-out;
	}
	.flyout button:hover {
	background-color: rgba(0, 0, 0, .1);
	}
	.flyout button:active {
	background-color: rgba(0, 0, 0, .5);
	}
	.flyout textarea {
	background-color: transparent;
	border: 0;
	font-family: Monaco, Menlo, Consolas, 'Courier New', Courier, monospace;
	font-size: medium;
	margin: 0;
	padding: 10px;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	}
	</style>
	</head>
	<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla id dolor a rhoncus. Sed vel nisl tempus metus hendrerit blandit a a nisl. Maecenas sed enim sit amet sem fringilla fermentum. Mauris elementum vehicula elit. Quisque consequat ipsum ut justo ornare volutpat. Sed varius sit amet metus nec accumsan. Nunc suscipit metus risus, id facilisis magna ullamcorper in. Fusce sollicitudin euismod dolor vitae fermentum.</p>

	<!-- サイドバー用 -->
	<div class="flyoutWrap hidden flexRow fillWithLastChild">
	<section class="flyout flexColumn fillWithLastChild">
	<!-- サイドバーの中身 (サンプルとしてボタンとテキストエリアを設置) -->
	<div class="flexRow">
	<button>Button A</button>
	<button>Button B</button>
	</div>
	<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla id dolor a rhoncus. Sed vel nisl tempus metus hendrerit blandit a a nisl. Maecenas sed enim sit amet sem fringilla fermentum. Mauris elementum vehicula elit. Quisque consequat ipsum ut justo ornare volutpat. Sed varius sit amet metus nec accumsan. Nunc suscipit metus risus, id facilisis magna ullamcorper in. Fusce sollicitudin euismod dolor vitae fermentum.</textarea>
	</section>

	<div class="flyoutBackground"></div>
	</div>

	<!-- サイドバーの表示をトグルするボタン -->
	<button class="flyoutToggle hidden"><span></span></button>
	</body>
	</html>