Pernah melihat sajian navigasi milik Mbah G (versi seluler)? Pastinya pernah lah ya. Menu navigasi geser kesamping (side Navigation) yang ibarat gorden Warteg atau biasa saya sebut sebagai sajian ciluk baa.
Seperti kita ketahui, banyak sekali model sajian navigasi pada blog / web. Seperti sajian dropdown, sajian horizontal, sajian laman, dan lainnya.
Untuk tutorial kali, saya ingin mencoba menciptakan sajian navigasi slide samping dengan banyak sekali variasinya. Seperti pengaruh buram (opacity), push content, dan lainnya. Nanti lihat demonya saja ya, mudah-mudahan ibarat mirip yang saya sebut di atas, hehehe...
Berikut ini, cara menciptakan sajian navigasi slide samping di Blog. Dengan posisi tombol sajian navigasi di atas header Blog.
Kode HTML
Tambahkan isyarat HTML berikut pada template Anda. Copy isyarat yang ditandai warna merah, lalu letakkan sesuai contoh di bawah.
Jika kesulitan atau tidak ada contoh isyarat HTML ibarat di bawah (pola isyarat HTML template Blogspot). Letakkan saja sempurna di bawah isyarat
Keterangan:
Pelajari juga:
Kode CSS
Tambahkan isyarat CSS berikut. Letakkan di atas isyarat
Keterangan:
Demo dan Javascript
Di bawah ada beberapa demo tampilan sajian navigasi slide samping beserta isyarat script untuk menjalankannya. Silahkan pilih untuk mencoba dan mendapat script nya.
Seperti kita ketahui, banyak sekali model sajian navigasi pada blog / web. Seperti sajian dropdown, sajian horizontal, sajian laman, dan lainnya.
Untuk tutorial kali, saya ingin mencoba menciptakan sajian navigasi slide samping dengan banyak sekali variasinya. Seperti pengaruh buram (opacity), push content, dan lainnya. Nanti lihat demonya saja ya, mudah-mudahan ibarat mirip yang saya sebut di atas, hehehe...
Berikut ini, cara menciptakan sajian navigasi slide samping di Blog. Dengan posisi tombol sajian navigasi di atas header Blog.
Kode HTML
Tambahkan isyarat HTML berikut pada template Anda. Copy isyarat yang ditandai warna merah, lalu letakkan sesuai contoh di bawah.
Jika kesulitan atau tidak ada contoh isyarat HTML ibarat di bawah (pola isyarat HTML template Blogspot). Letakkan saja sempurna di bawah isyarat
<body>. Kemudian pasang isyarat epilog </div> di atas isyarat </body>.<body> ..... ..... <div id='main-nav'> <div class='navisa' id='myNavix'> <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'>&times;</a> <a href='#'>Tentang</a> <a href='#'>Layanan</a> <a href='#'>Kebijakan</a> <a href='#'>Kontak</a> </div> <div class='topnav'> <button class='tnav' onclick='openNav()'>≡</button> <span class='thome'><a expr:href='data:blog.homepageUrl'>Home</a></span> <!-- tambahkan element lain di sini --> </div> <div class='content'> ..... ..... <!-- content --> </div> </div> <div class='content-cap-bottom cap-bottom'> <div class='cap-left'/> <div class='cap-right'/> </div> </div> </div> </div> ..... ..... </body>
Keterangan:
- Baris isyarat pertama (
<div class='main-nav'>) dan penutupnya (</div>) hanya berlaku kalau Anda menentukan untuk menciptakan sajian navigasi push content. - Kode tersebut dipakai untuk mendorong semua element yang terbungkus di dalamnya.
- Anda juga dapat menambahkan element lain di samping tombol navigasi. Sepeti kotak pencarian, tombol berbagi, judul Blog, atau yang lainnya.
- Ganti isyarat # dengan url halaman Anda.
Pelajari juga:
- Cara menciptakan sajian navigasi melayang ketika di scroll
- Cara menciptakan top sajian plus search box di Blog
Kode CSS
Tambahkan isyarat CSS berikut. Letakkan di atas isyarat
]]></b:skin> atau </style>./*Navigasi Samping*/ .navisa { position: absolute; height: 100%; width: 0; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 60px; transition: 0.5s;} .topnav { overflow: hidden; margin: 0; width: 100%; padding: 4px 0 0 0; position: relative; height: 45px; line-height: 45px; background: #666666;} .thome { font-size: 20px; padding: 5px; font-weight: 400; margin-left: 10px;} .thome a { color: #ffffff; text-decoration: none;} .tnav { color: #ffffff; cursor: pointer; box-sizing: border-box; padding: 0 10px; border: none; border-radius: 20px; background: #888; margin-left: 10px; font-size: 25px; font-weight: 600;} .navisa a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s} .navisa a:hover, .offcanvas a:focus{ color: #f1f1f1;} .navisa .closebtn { top: 0; right: 25px; position: absolute; font-size: 36px; margin-left: 50px;} #main-nav { transition: margin-left .5s;} @media screen and (max-height: 450px) { .navisa a {font-size:18px;} .navisa {padding-top:15px;}} @media screen and (max-width: 1024px) { .navisa {position: fixed;}} Keterangan:
- Kode CSS di atas dipakai untuk menciptakan sajian navigasi berada di sisi kiri.
- Jika Anda menentukan untuk menciptakan sajian navigasi di samping kanan, ganti semua isyarat CSS yang berbau left menjadi right dan right menjadi left.
Demo dan Javascript
Di bawah ada beberapa demo tampilan sajian navigasi slide samping beserta isyarat script untuk menjalankannya. Silahkan pilih untuk mencoba dan mendapat script nya.
- Demo dan Javascript Menu Navigasi geser Samping dengan Animasi
- Demo dan Javascript Menu Navigasi Slide Samping dengan Animasi dan Opacity
- Demo dan Javascript Menu Navigasi tanpa Animasi
- Demo dan Javascript Menu Navigasi Slide Samping layar penuh
- Demo dan Javascript Menu Navigasi Slide Samping Push Content
- Demo dan Javascript Menu Navigasi Slide Samping Push Content dan Opacity
