Juli 31, 2021
Membuat togle fullscreen menu

Membuat toggle fullscreen menu

Pernah kita bahas sebelumnya yaitu membuat website dengan toggle menu, kali ini kita akan 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

: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

<!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 dulu pembahasan tentang Free script kali ini, sampai jumpa di free script selanjutnya, dan salam sukses selalu buat Anda semuanya.


%%footer%%