Membuat toggle fullscreen menu

Pernah kita bahas sebelumnya yaitu membuat website dengan toggle menu, kali ini kita coba membuat togle fullscreen menu.

Toggle fullscreen menu ini menarik untuk di praktek-kan, selain karena hanya menggunakan HTML dan CSS saja. Togle menu ini juga cukup cantik dan responsive tentunya.


Script ini Saya bagi dua penulisanya, yaitu CSS dan HTML-nya, namun sebenarnya satu halaman seperti biasanya. Langsung saja lihat scriptnya di bawah.

CSS toggle fullscreen menu

:root {  --sidebar-width: 100%;
 --toggler-size: 30px;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 0.8rem;
}
@media screen and (min-width: 20em) {
html {  font-size: calc(0.8rem + 0.4 * (100vw - 20em) / 55);
}
}
@media screen and (min-width: 75em) {
html { font-size: 1.2rem; }
}
.wrapper {
  min-height: 100vh;
  min-width: 100vw;
  background: AliceBlue;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sidebar, .content {
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.sidebar {
  width: var(--sidebar-width);
 -webkit-transform: translateX(calc(var(--sidebar-width) * -1));
 transform: translateX(calc(var(--sidebar-width) * -1));
  background: -webkit-linear-gradient(top left, Tomato, Wheat);
  background: linear-gradient(to bottom right, Tomato, Wheat);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  height: 100vh;
  opacity: .5;
}
.content {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.menu { list-style-type: none; }
.menu__link {
  color: white;
  font-weight: 100;
  text-decoration: none;
  font-size: 10vmin;
  line-height: 15vmin;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.menu__link:hover, .menu__link:focus, .menu__link:active { color: Gold; }
.menu-toggler {
  display: block;
  width: var(--toggler-size);
  height: var(--toggler-size);
  position: relative;
  position: fixed;
  top: 10px;
  left: 10px;
  cursor: pointer;
  z-index: 1;
}
.menu-toggler__line {
  height: calc(var(--toggler-size) / 5);
  background: Tomato;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.menu-toggler__line:nth-child(2) {  top: calc(var(--toggler-size) / 5 * 2);
}
.menu-toggler__line:nth-child(3) {  top: calc(var(--toggler-size) / 5 * 4);
}
.input-toggler {
  position: absolute;
  left: -100%;
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line { background: Wheat; }
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(1) {  -webkit-transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
}
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(2) { opacity: 0; }
.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(3) {  -webkit-transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
}
.input-toggler:checked ~ .sidebar {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: .98;
}

HTML toggle fullscreen menu

<!DOCTYPE html>
<html lang="id">
<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Togle fullscreen menu</title>
	
<!-- CSS code -->

<style>

/* Tempatkan disini kode CSS diatas */

</style>

<!-- end of CSS code -->

</head>
<body>

<div class="wrapper">
  <input type="checkbox" id="menuToggler" class="input-toggler"/>
  <label for="menuToggler" class="menu-toggler"> <span class="menu-toggler__line"></span> <span class="menu-toggler__line"></span> <span class="menu-toggler__line"></span> </label>
  <aside class="sidebar">
    <ul class="menu">
      <li class="menu__item"><a class="menu__link" href="#">Home</a></li>
      <li class="menu__item"><a class="menu__link" href="#">Blog</a></li>
      <li class="menu__item"><a class="menu__link" href="#">Portfolio</a></li>
      <li class="menu__item"><a class="menu__link" href="#">About</a></li>
      <li class="menu__item"><a class="menu__link" href="#">Contact</a></li>
    </ul>
  </aside>
  <main class="content">
    <h1>Togle fullscreen menu</h1>
  </main>
</div>

</body>
</html>

Gunakan Realtime HTML Editor ↗ untuk melihat dan meng-edit script diatas, silahkan anda sesuaikan warna dan tampilanya agar lebih menarik lagi.

Sampai disini penjelasan singkat tentang membuat toggle fullscreen menu, sampai jumpa lagi di Free script dan Tutorial berikutnya.

Semoga bermanfaat, dan salam sukses selalu untuk Anda semuanya.

Mungkin Anda Menyukai