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
.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()">×</a>
<a href="#">About</a><br />
<a href="#">Services</a><br />
<a href="#">Clients</a><br />
<a href="#">Contact</a><br />
</div><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ Open</span>
<br />
Terimakasih Anda sudah membaca Tulisan kami mengenai Cara Membuat Menu Tersembunyi di Blogspot. Semoga Bermanfaat dan jangan lewatkan beberapa referensi terkait dibawah ini ya.