Tips Tutorial Cara Menciptakan Hidangan Navigasi Slide Samping Di Blog
Pernah melihat hidangan navigasi milik Mbah G (versi seluler)? Pastinya pernah lah ya. Menu navigasi geser kesamping (side Navigation) yang ...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-cara-menciptakan-hidangan.html
Pernah melihat hidangan navigasi milik Mbah G (versi seluler)? Pastinya pernah lah ya. Menu navigasi geser kesamping (side Navigation) yang menyerupai gorden Warteg atau biasa saya sebut sebagai hidangan ciluk baa.
Seperti kita ketahui, banyak sekali model hidangan navigasi pada blog / web. Seperti hidangan dropdown, hidangan horizontal, hidangan laman, dan lainnya.
Untuk tutorial kali, saya ingin mencoba menciptakan hidangan navigasi slide samping dengan aneka macam variasinya. Seperti pengaruh buram (opacity), push content, dan lainnya. Nanti lihat demonya saja ya, mudah-mudahan menyerupai mirip yang saya sebut di atas, hehehe...
Berikut ini, cara menciptakan hidangan navigasi slide samping di Blog. Dengan posisi tombol hidangan navigasi di atas header Blog.
Kode HTML
Tambahkan instruksi HTML berikut pada template Anda. Copy instruksi yang ditandai warna merah, lalu letakkan sesuai contoh di bawah.
Jika kesulitan atau tidak ada contoh instruksi HTML menyerupai di bawah (pola instruksi HTML template Blogspot). Letakkan saja sempurna di bawah instruksi
Keterangan:
Pelajari juga:
Kode CSS
Tambahkan instruksi CSS berikut. Letakkan di atas instruksi
Keterangan:
Demo dan Javascript
Di bawah ada beberapa demo tampilan hidangan navigasi slide samping beserta instruksi script untuk menjalankannya. Silahkan pilih untuk mencoba dan mendapat script nya.
Seperti kita ketahui, banyak sekali model hidangan navigasi pada blog / web. Seperti hidangan dropdown, hidangan horizontal, hidangan laman, dan lainnya.
Untuk tutorial kali, saya ingin mencoba menciptakan hidangan navigasi slide samping dengan aneka macam variasinya. Seperti pengaruh buram (opacity), push content, dan lainnya. Nanti lihat demonya saja ya, mudah-mudahan menyerupai mirip yang saya sebut di atas, hehehe...
Berikut ini, cara menciptakan hidangan navigasi slide samping di Blog. Dengan posisi tombol hidangan navigasi di atas header Blog.
Kode HTML
Tambahkan instruksi HTML berikut pada template Anda. Copy instruksi yang ditandai warna merah, lalu letakkan sesuai contoh di bawah.
Jika kesulitan atau tidak ada contoh instruksi HTML menyerupai di bawah (pola instruksi HTML template Blogspot). Letakkan saja sempurna di bawah instruksi
<body>. Kemudian pasang instruksi epilog </div> di atas instruksi </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 instruksi pertama (
<div class='main-nav'>) dan penutupnya (</div>) hanya berlaku kalau Anda menentukan untuk menciptakan hidangan 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 instruksi # dengan url halaman Anda.
Pelajari juga:
- Cara menciptakan hidangan navigasi melayang dikala di scroll
- Cara menciptakan top hidangan plus search box di Blog
- Cara Membuat Header Navigasi Bootstrap pada template Blogger
Kode CSS
Tambahkan instruksi CSS berikut. Letakkan di atas instruksi
]]></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 hidangan navigasi berada di sisi kiri.
- Jika Anda menentukan untuk menciptakan hidangan navigasi di samping kanan, ganti semua instruksi CSS yang berbau left menjadi right dan right menjadi left.
Demo dan Javascript
Di bawah ada beberapa demo tampilan hidangan navigasi slide samping beserta instruksi 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
