Membuat website dengan sliding menu

Setelah kemarin kita Membuat website dengan togle menu, sekaran kita coba Membuat website dengan sliding menu.

Masih hanya menggunakan HTML dan CSS saja, karena ini hanyalah sarana penunjang untuk latihan dan belajar kita.

Sliding menu dengan html dan css


Langsung saja kita lihat script html dan css dibawah, sangat cocok untuk sarana belajar membuat website dasar.

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

<style>
body {
  margin: 0;
  font-family: verdana;
  background-color:#dde;
  color:#000;
}
.menu {
  font-weight: 100;
  background: #f5f5f5;
  width: 150px;
  height: 100%;
  padding-left: 50px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
  box-shadow: -3px 0px 5px 0px rgba(0,0,0,0.2);
  right: -130px;
  transition: all .3s;
  -webkit-transition: all .3s;
  color: #222
}
.menu:hover, .menu:focus {
  transform: translate3d(-130px, 0, 0);
  animation-timing-function: 1s ease-in
}
.menu .title {
  top: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transform: rotate(270deg);
  left: 10px;
  font-weight: 800;
  font-size: 15px
}
.menu .nav {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-weight: 100
}
.menu .nav li {
  padding-bottom: 30px;
  list-style-type: none
}
.menu .nav li a {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all .3s;
  -webkit-transition: all .3s
}
.menu .nav li a:hover { color: #f00 }
.intro {
  position: absolute;
  top: 30%;
  width: 40%;
  margin: 0 auto;
  left: 0;
  right: 0;
  font-size: 45px;
  text-align: center;
  font-family: arial;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<div class="menu">
    <div class="title">MENU</div>
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

<div class="intro">
    Membuat website dengan sliding menu
</div>

<!-- End of body content -->

</body>
</html>

Anda diperbolehkan mengedit ulang script diatas sebagai bahan untuk belajar dan latihan koding script html dan css yang Anda pelajari..

Silahkan melihat dan mengedit script diatas pada halaman Realtime HTML Editor  ↗

Sampailah sudah di akhir postingan membuat website dengan sliding menu, selamat belajar, dan sukses selalu untuk Anda semua.

Mungkin Anda Menyukai