Cara Membuat Menu Tersembunyi di Blogspot

shares

Anda mungkin pernah mengunjungi beberapa website yang menu navigasinya tersembunyi dan hanya akan muncul jika kita menekan tombol open terlebih dahulu. Nah bagi yang penasaran dengan bagaimana membuatnya, silahkan simak penjelasan berikut ini.
Cara Membuat Menu Tersembunyi di Blogspot

Cara Membuat Menu Tersembunyi di Blogspot

Sebelum kita belajar membuatnya, Silahkan klik kata Open di bawah sebagai contoh hasil yang akan kita buat nanti


☰ Open


Bagaimana Cara Membuatnya?

Caranya cukup mudah, silahkan anda masuk ke edit html pada blog Anda. Kemudian, salin kode css dibawah ini dan letakkan sebelum kode </style>. Gunakan ctrl + f untuk mencari nya.

.sembunyi {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sembunyi a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sembunyi a:hover {
  color: #f1f1f1;
}

.sembunyi .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sembunyi {padding-top: 15px;}
  .sembunyi a {font-size: 18px;}
}
setelah itu cari juga </head>, setelah ketemu, masukkan script dibawah ini.

<script>
function openNav() {
  document.getElementById("sembunyian").style.width = "250px";
}

function closeNav() {
  document.getElementById("sembunyian").style.width = "0";
}
</script>
Setelah itu, Pasang kode Html berikut ini dimanapun sesuai keinginan Anda, bisa di samping header, dalam navigasi, disidebar atau pun bisa juda didalam halaman postingan Anda.

<div id="sembunyian" class="sembunyi">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

Related Posts

0 komentar:

Post a Comment

Silahkan Berkomentar dengan memperhatikan beberapa point dibawah ini.

► Berkomentarlah sesuai topik
► Jangan sungkan untuk bertanya
► Saya sangat menghargai komentar anda.
► Di mohon untuk tidak menautkan link aktif , Karena link anda bisa jadi dianggap sebagai spam