Cara Membuat Menu Navigasi Slide Samping di Blog ~ Bakul Oreg

Pernah melihat menu navigasi milik Mbah G (versi seluler)? Pastinya pernah lah ya. Menu navigasi geser kesamping (side Navigation) yang mirip gorden Warteg atau biasa saya sebut sebagai menu ciluk baa.

Seperti kita ketahui, banyak sekali model menu navigasi pada blog / web. Seperti menu dropdown, menu horizontal, menu laman, dan lainnya.

Untuk tutorial kali, saya ingin mencoba membuat menu navigasi slide samping dengan berbagai variasinya. Seperti efek buram (opacity), push content, dan lainnya. Nanti lihat demonya saja ya, mudah-mudahan mirip seperti yang saya sebut di atas, hehehe...

Berikut ini, cara membuat menu navigasi slide samping di Blog. Dengan posisi tombol menu navigasi di atas header Blog.

Kode HTML
Tambahkan kode HTML berikut pada template Anda. Copy kode yang ditandai warna merah, kemudian letakkan sesuai pola di bawah.

Jika kesulitan atau tidak ada pola kode HTML seperti di bawah (pola kode HTML template Blogspot). Letakkan saja tepat di bawah kode <body>. Kemudian pasang kode penutup </div> di atas kode </body>.

<body>

.....

.....

  <div id='main-nav'>
    <div class='navisa' id='myNavix'>
      <a class='closebtn' href='javascript:void(0)' onclick='closeNav()'>&amp;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()'>&#8801;</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 kode pertama (<div class='main-nav'>) dan penutupnya (</div>) hanya berlaku jika Anda memilih untuk membuat menu navigasi push content.
Kode tersebut digunakan untuk mendorong semua element yang terbungkus di dalamnya.
Anda juga bisa menambahkan element lain di samping tombol navigasi. Sepeti kotak pencarian, tombol berbagi, judul Blog, atau yang lainnya.
Ganti kode # dengan url halaman Anda.

Pelajari juga:

Kode CSS
Tambahkan kode CSS berikut. Letakkan di atas kode ]]></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 digunakan untuk membuat menu navigasi berada di sisi kiri.
Jika Anda memilih untuk membuat menu navigasi di samping kanan, ganti semua kode CSS yang berbau left menjadi right dan right menjadi left.

Demo dan Javascript
Di bawah ada beberapa demo tampilan menu navigasi slide samping beserta kode script untuk menjalankannya. Silahkan pilih untuk mencoba dan mendapatkan script nya.

10 comments:

sufyan Yaan said...: blog agan bagus, saya harap dilanjutkan nulisnya ya gan; January 5, 2018 at 5:28 PM
Ridwan said...: Terima kasih gan, saya juga berharap begitu, sekarang ini lagi fokus kerja dunia nyata dulu. Next time sambung lagi ngeblognya; January 5, 2018 at 9:25 PM
Indrawan Lisanto said...: Gak jalan gan, apa emang gak pake javascript?; March 24, 2018 at 3:30 PM
Ridwan said...: Pake gan. Javascript nya ada di halaman demo, tinggal pilih; March 24, 2018 at 4:56 PM
ikhsan said...: misalnya pengen ganti menu navigasi kode yg dihaphs yg mana gan?; July 23, 2018 at 6:40 PM
ikhsan said...: misal mau ganti jadi kyk gitu berarti kode yg lama dihapus kan bisa kasih contoh kodenya?; July 23, 2018 at 6:42 PM
Ridwan said...: Kalau menu laman dibawah judul gak usah, tapi kalau ada menu diatas judul blog harus dihapus dulu, biasanya tidak jauh dibawah kode <body> ada deretan tautan yang dibungkus kode <li>, kalau bingung mending pakai template yang masih polos aja gan, buat eksperimen; July 23, 2018 at 7:36 PM
maxcorps.space said...: om, saya udah nyoba 1 sampe 5 yang fungsi cuma nomor 5 doank, lainnya macet.; October 5, 2019 at 4:17 PM
Ridwan said...: Masih efektif semua ko, mungkin kurang teliti gan,; October 5, 2019 at 11:52 PM
maxcorps.space said...: oke dah saya coba lagi, kemaren mungkin sedang kurang konsen, nyoba berkali-kali gagal terus. trims gan.; October 6, 2019 at 4:58 AM

Thursday, November 23, 2017

Cara Membuat Menu Navigasi Slide Samping di Blog

10 comments:

Arsip Blog